如何纵向中心figcaption?

时间:2015-10-22 09:00:47

标签: html

我希望这个图像中间的图像旁边有一个figcaption。我怎样才能做到这一点?我试过这样的:

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

但标题仍位于图片的顶部。

2 个答案:

答案 0 :(得分:0)

试试这个解决方案:

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>

答案 1 :(得分:0)

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

figure {
  display: flex;
}

figure figcaption {
  margin: auto 10px;
}
<figure>
    <img src="https://picsum.photos/200">
    <figcaption>A random picture</figcaption>
</figure>