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

试试这个解决方案：

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>

Answer 2

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

figure {
  display: flex;
}

figure figcaption {
  margin: auto 10px;
}

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

如何纵向中心figcaption？

2 个答案: