Html 如何对齐图像下方的标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19138758/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align caption underneath image
提问by Brian Lam
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.
我总共有 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>
And so on.
等等。
回答by Marc Audet
I would set up the code this way:
我会这样设置代码：
<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>
and apply the following CSS:
并应用以下 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;
}
Because each figureis 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.
因为每个figure都是一个内联块，你基本上可以每行重复这个单元三次，或者<br>在每第三个之后添加一个，或者在一个块元素中包裹三个，或者使用 CSS3nth-of-type(3n)选择器添加一个换行符或类似的。
Use text-align: centeron figcaptionto align the test to the center.
使用text-align: center上figcaption对准测试中心。
See demo at: http://jsfiddle.net/audetwebdesign/4njG8/
见演示：http: //jsfiddle.net/audetwebdesign/4njG8/
The results look like this (for a wide enough screen):
结果如下所示（对于足够宽的屏幕）：
回答by anatak
this works for me.
这对我有用。
figure {
display: inline-block;
text-align: center;
border: 1px dotted gray;
margin: 5px; /* adjust as needed */
}
figure img {
vertical-align: top;
}
figure figcaption {
border: 1px dotted blue;
}
text-align: center; is the only thing needed.
文本对齐：居中；是唯一需要的东西。
回答by Paulie_D
Each figure should only contain one image and one figcaption.
每个图形应该只包含一个图像和一个 figcaption。
<figure>
<img>
<figcaption>
</figcaption>
</figure>
BTW...the 'center' element no longer exists.
顺便说一句......“中心”元素不再存在。
