如何对齐图像下的字幕 [英] How to align caption underneath image

问题描述

我总共有9张图片，每行有3张图片，我设法为其中一张图片添加了一个字幕，但是没有为其他图片添加字幕，因为它只是将下面的所有内容对齐，而不是将文本对齐到每行

I have 9 images in total and three on each row, I have managed to add a caption for one of my images, but failed to do so for the other ones as it just centers everything underneath and not aligned text to rows per image.

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

等等。

推荐答案

我将这样设置代码：

<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）选择器添加换行符或类似选项。

Because each figure is an inline-block, you can basically repeat the unit three times per row, either adding a <br> after the every third one, or wrapping three in a block element, or using a CSS3 nth-of-type(3n) selector to add a line break or similar.

在 figcaption 上使用 text-align：center 将测试与中心对齐。

Use text-align: center on figcaption to align the test to the center.

查看演示： http://jsfiddle.net/audetwebdesign/4njG8/

结果如下所示（对于足够宽的屏幕）：

The results look like this (for a wide enough screen):

这篇关于如何对齐图像下的字幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！