css - 让 fcaption 与 img 对齐

Question

这是我的代码

<figure>
 <img class="music-player--album-image" src="img/album1.png">
 <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>

这会生成图像并在其下方生成标题，我想要做的是将标题放在图像的一侧，垂直对齐并位于图像旁边的中心。

有什么想法吗？谢谢

Answer 1

试试这个 - DEMO

HTML

<figure>
 <img class="music-player--album-image" src="http://placehold.it/350x150">
 <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>

将 CSS 样式 display: table; 赋予 figure, display: table-cell; and vertical-align: middle; 到 img, figcaption。您还可以使用填充来设置 figcaption 的样式。

CSS

figure {
    display: table;
}
img, figcaption {
    display: table-cell;
    vertical-align: middle;
}
figcaption {
    padding-left: 10px;
}