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

这会生成图像并在其下方生成 figcaption，我正在尝试将标题放在图像的一侧，垂直对齐并位于图像旁边的中心。

有什么想法吗？ 谢谢

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; 和 vertical-align: middle; 至 img, figcaption。您还可以使用填充来设置figcaption 的样式。

CSS

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