Question

我正在尝试在<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>标签。

Answer 1

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

使用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。

参考文献：

<img/>左侧的<figcaption>都垂直对齐

1 个答案: