我希望这个图像中间的图像旁边有一个figcaption。我怎样才能做到这一点?我试过这样的:
<figure>
<img src="Pic1" style="width:60%; height:auto; float:right" />
<figcaption class="title" style="vertical-align:middle">xxx</figcaption>
</figure>
但标题仍位于图片的顶部。
答案 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>