如何在图像下方对齐标题

Question

我总共有9个图像,每行有3个,我已经设法为我的一个图像添加了一个标题,但是没有为其他图像添加标题,因为它只是将所有内容放在下面,而不是将文本对齐到每个图像的行.

<figure>
<center>
<img src='images/album1.jpg' alt='missing' />
<figcaption>Album name goes here
<br>Year goes here
<br>artist name goes here</figcaption>

<img src='images/album2.jpg' alt='missing' />
<figcaption>Album name goes here
<br>Year goes here
<br>artist name goes here</figcaption>

<img src='images/album2.jpg' alt='missing' />
<figcaption>Album name goes here
<br>Year goes here
<br>artist name goes here</figcaption>
</figure><center>

等等.

Answer 1

我会这样设置代码:

<figure>
    <img src='http://placehold.it/200x200' alt='missing' />
    <figcaption>Album name goes here
        <br>Year goes here
        <br>artist name goes here</figcaption>
</figure>

并应用以下CSS:

figure {
    display: inline-block;
    border: 1px dotted gray;
    margin: 20px; /* adjust as needed */
}
figure img {
    vertical-align: top;
}
figure figcaption {
    border: 1px dotted blue;
    text-align: center;
}

因为每个figure都是一个内联块,所以基本上你可以每行重复三次单元,或者<br>在每三次后添加一个,或者在一个块元素中包含三个,或者使用CSS3 nth-of-type(3n)选择器来添加换行符等.

使用text-align: center上figcaption对准测试中心.

请参阅演示:http: //jsfiddle.net/audetwebdesign/4njG8/

结果看起来像这样(对于足够宽的屏幕):