<figcaption> 在 <img> 的左边并且都垂直对齐答案

【问题标题】：<figcaption> on left of <img> and both vertically aligned<figcaption> 在 <img> 的左边并且都垂直对齐
【发布时间】：2019-05-04 01:40:41
【问题描述】：

我正在尝试在 <img> 的左侧添加一个简单的标题并垂直对齐它们（即文本与右侧图像的中间对齐）。

<figure><img style="float:right" alt="qrcode_vcard" src="/assets/pic.png" />
 <figcaption>My caption goes here. How do I make it aligned to the middle rather than the top.</figcaption>
</figure>

我可以将图像浮动到右侧，但标题与顶部对齐。我想把它对齐到中间。我还想保留<figure> 和<figcaption> 标签。

【问题讨论】：

标签： image vertical-alignment figure

【解决方案1】：

有两个简单的选项，使用 CSS Grid 或 CSS flexbox。

使用弹性框：

figure {
  /* forcing the use of CSS flexbox for layout: */
  display: flex;
  /* reversing the direction of the contents, to ensure
     the image is placed to the right (in left-to-right)
     locales, but to the left in right-to-left locales): */
  flex-direction: row-reverse;
  /* aligning the items to the center of the flow-axis
     (the direction of the contents): */
  align-items: center;
}

<figure><img alt="qrcode_vcard" src="https://fillmurray.com/200/200" />
  <figcaption>My caption goes here. How do I make it aligned to the middle rather than the top.</figcaption>
</figure>

或者，使用 CSS 网格：

figure {
  /* forcing the use of CSS grid for layout: */
  display: grid;
  /* specifying that contents should be placed
     in columns rather than rows: */
  grid-auto-flow: column;
  /* setting the text direction to right-to-left flow: */
  direction: rtl;
  /* aligning the contents to the centre of the flow-axis: */
  align-items: center;
  /* defining a 10px gutter between grid-items: */
  grid-gap: 10px;
}

<figure><img alt="qrcode_vcard" src="https://fillmurray.com/200/200" />
  <figcaption>My caption goes here. How do I make it aligned to the middle rather than the top.</figcaption>
</figure>

JS Fiddle demonstrations.

参考资料：

【讨论】：