Html 如何在 CSS 中对齐图像下方的文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22592064/
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 text below an image in CSS?
提问by Adz
HTML
HTML
<div class="image1">
<img src="images/img1.png" width="250" height="444" alt="Screen 1"/>
<img src="images/img2.png" width="250" height="444" alt="Screen 2"/>
<img src="../images/img3.png" width="250" height="444" alt="Screen 3"/>
</div>
If I add a paragraph text between img1 and img2 they get separated (img2 goes to a newline)
如果我在 img1 和 img2 之间添加一个段落文本，它们会被分开（img2 转到换行符）
What I'm attempting to do is this (with some space between the images):
我正在尝试做的是这个（图像之间有一些空间）：
[image1] [image2] [image3]
[text] [text] [text]
I haven't given the images their own individual class names because the images don't align horizontally to one another.
我没有为图像指定它们自己的类名，因为图像不会彼此水平对齐。
回答by GolezTrol
Add a container div for the image and the caption:
为图像和标题添加一个容器 div：
<div class="item">
<img src=""/>
<span class="caption">Text below the image</span>
</div>
Then, with a bit of CSS, you can make an automatically wrapping image gallery:
然后，使用一些 CSS，您可以制作一个自动包装的图片库：
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 120px;
}
img {
width: 100px;
height: 100px;
background-color: grey;
}
.caption {
display: block;
}
div.item {
/* To correctly align image, regardless of content height: */
vertical-align: top;
display: inline-block;
/* To horizontally center images and caption */
text-align: center;
/* The width of the container also implies margin around the images. */
width: 120px;
}
img {
width: 100px;
height: 100px;
background-color: grey;
}
.caption {
/* Make the caption a block so it occupies its own line. */
display: block;
}<div class="item">
<img src=""/>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<img src=""/>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<img src=""/>
<span class="caption">An even longer text below the image which should take up multiple lines.</span>
</div>
<div class="item">
<img src=""/>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<img src=""/>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<img src=""/>
<span class="caption">An even longer text below the image which should take up multiple lines.</span>
</div>Updated answer
更新答案
Instead of using 'anonymous' div and spans, you can also use the HTML5 figureand figcaptionelements. The advantage is that these tags add to the semantic structure of the document. Visually there is no difference, but it may (positively) affect the usability and indexability of your pages.
除了使用“匿名”div 和 span，您还可以使用 HTML5figure和figcaption元素。优点是这些标签增加了文档的语义结构。视觉上没有区别，但它可能（积极地）影响页面的可用性和可索引性。
The tags are different, but the structure of the code is exactly the same, as you can see in this updated snippet and fiddle:
标签不同，但代码的结构完全相同，正如您在此更新的代码段和小提琴中所见：
<figure class="item">
<img src=""/>
<figcaption class="caption">Text below the image</figcaption>
</figure>
figure.item {
/* To correctly align image, regardless of content height: */
vertical-align: top;
display: inline-block;
/* To horizontally center images and caption */
text-align: center;
/* The width of the container also implies margin around the images. */
width: 120px;
}
img {
width: 100px;
height: 100px;
background-color: grey;
}
.caption {
/* Make the caption a block so it occupies its own line. */
display: block;
}<figure class="item">
<img src=""/>
<figcaption class="caption">Text below the image</figcaption>
</figure>
<figure class="item">
<img src=""/>
<figcaption class="caption">Text below the image</figcaption>
</figure>
<figure class="item">
<img src=""/>
<figcaption class="caption">An even longer text below the image which should take up multiple lines.</figcaption>
</figure>
<figure class="item">
<img src=""/>
<figcaption class="caption">Text below the image</figcaption>
</figure>
<figure class="item">
<img src=""/>
<figcaption class="caption">Text below the image</figcaption>
</figure>
<figure class="item">
<img src=""/>
<figcaption class="caption">An even longer text below the image which should take up multiple lines.</figcaption>
</figure>回答by Siva Charan
Best way is to wrap the Image and Paragraph text with a DIV and assign a class.
最好的方法是用 DIV 包装图像和段落文本并分配一个类。
Example:
例子：
<div class="image1">
<div class="imgWrapper">
<img src="images/img1.png" width="250" height="444" alt="Screen 1"/>
<p>It's my first Image</p>
</div>
...
...
...
...
</div>
回答by PC3SQ
I created a jsfiddle for you here: JSFiddle HTML & CSS Example
我在这里为你创建了一个 jsfiddle：JSFiddle HTML & CSS Example
CSS
CSS
div.raspberry {
float: left;
margin: 2px;
}
div p {
text-align: center;
}
HTML(apply CSS above to get what you need)
HTML（应用上面的 CSS 以获得您需要的内容）
<div>
<div class = "raspberry">
<img src="http://31.media.tumblr.com/tumblr_lwlpl7ZE4z1r8f9ino1_500.jpg" width="100" height="100" alt="Screen 2"/>
<p>Raspberry <br> For You!</p>
</div>
<div class = "raspberry">
<img src="http://31.media.tumblr.com/tumblr_lwlpl7ZE4z1r8f9ino1_500.jpg" width="100" height="100" alt="Screen 3"/>
<p>Raspberry <br> For You!</p>
</div>
<div class = "raspberry">
<img src="http://31.media.tumblr.com/tumblr_lwlpl7ZE4z1r8f9ino1_500.jpg" width="100" height="100" alt="Screen 3"/>
<p>Raspberry <br> For You!</p>
</div>
</div>
回答by designerNProgrammer
You can use the HTML5 Caption feature.
您可以使用 HTML5 字幕功能。
回答by Pekka Heinonen
Easiest way excpecially if you don't know images widths is to put the caption in it's own div element an define it to be cleared:both !
如果您不知道图像宽度，最简单的方法是将标题放在它自己的 div 元素中并将其定义为清除：两者！
...
...
<div class="pics">
<img class="marq" src="pic_1.jpg" />
<div class="caption">My image 1</div>
</div>
<div class="pics">
<img class="marq" src="pic_2.jpg" />
<div class="caption">My image 2</div>
</div>
...
...
and in style-block define
并在样式块中定义
div.caption: {
float: left;
clear: both;
}
回答by Jason Crosby
Since the default for block elements is to order one on top of the other you should also be able to do this:
由于块元素的默认设置是将一个元素放在另一个元素之上，因此您也应该能够这样做：
<div>
<img src="path/to/img">
<div>Text Under Image</div>
</div
img {
display: block;
}
回答by phantomxxx
Instead of images i choose background option:
我选择背景选项而不是图像：
HTML:
HTML：
<div class="class1">
<p>Some paragraph, Some paragraph, Some paragraph, Some paragraph, Some paragraph,
</p>
</div>
<div class="class2">
<p>Some paragraph, Some paragraph, Some paragraph, Some paragraph, Some paragraph,
</p>
</div>
<div class="class3">
<p>Some paragraph, Some paragraph, Some paragraph, Some paragraph, Some paragraph,
</p>
</div>
CSS:
CSS：
.class1 {
background: url("Some.png") no-repeat top center;
text-align: center;
}
.class2 {
background: url("Some2.png") no-repeat top center;
text-align: center;
}
.class3 {
background: url("Some3.png") no-repeat top center;
text-align: center;
}
