html - 如何垂直居中 figcaption？

Question

我想要在这张图片中间的图片旁边添加一个图形说明。我怎样才能做到这一点？我试过这样:

<figure>
     <img src="Pic1" style="width:60%; height:auto; float:right" />
     <figcaption class="title" style="vertical-align:middle">xxx</figcaption>
</figure>

但标题仍然在图像的顶部。

Answer 1

您可以将图形显示为 flex，然后使用自动边距使标题居中。

figure {
  display: flex;
}

figure figcaption {
  margin: auto 10px;
}

<figure>
    <img src="https://picsum.photos/200">
    <figcaption>A random picture</figcaption>
</figure>