如何对齐图像下方的标题 [英] 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屋!