如何垂直居中figcaption？

Question

我希望在此图像中间的图像旁边添加一个 figcaption。 我怎样才能做到这一点？ 我试过这样：

<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>

Answer 2

试试这个解决方案：

 figure { display:table; } figure figcaption.title { display:table-cell; vertical-align:middle; } figure img { display:table-cell; width:60%; }

 <figure> <figcaption class="title">xxx</figcaption> <img src="http://placehold.it/250x300"/> </figure>