Html 如何在图像正下方对齐文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1225130/
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 can I align text directly beneath an image?
提问by Majid
I used to know how to put an image on top and then justify the text below the image so that it stays within the borders of the width of the image. However, now I have no idea how to do this. How is this accomplished?
我曾经知道如何将图像放在顶部，然后对齐图像下方的文本，使其保持在图像宽度的边界内。但是，现在我不知道该怎么做。这是如何实现的？
回答by Jason
Your HTML:
你的 HTML：
<div class="img-with-text">
<img src="yourimage.jpg" alt="sometext" />
<p>Some text</p>
</div>
If you know the width of your image, your CSS:
如果您知道图像的宽度，那么您的 CSS：
.img-with-text {
text-align: justify;
width: [width of img];
}
.img-with-text img {
display: block;
margin: 0 auto;
}
Otherwise your text below the image will free-flow. To prevent this, just set a width to your container.
否则图像下方的文字将自由流动。为了防止这种情况，只需为您的容器设置一个宽度。
回答by Majid
You can use HTML5 <figcaption>:
您可以使用 HTML5 <figcaption>：
<figure>
<img src="img.jpg" alt="my img"/>
<figcaption> Your text </figcaption>
</figure>
工作示例。
回答by Gordon Gustafson
In order to be able to justify the text, you need to know the width of the image. You can just use the normal width of the image, or use a different width, but IE 6 might get cranky at you and not scale.
为了能够对齐文本，您需要知道图像的宽度。您可以只使用图像的正常宽度，也可以使用不同的宽度，但 IE 6 可能会对您产生影响而不是缩放。
Here's what you need:
这是您需要的：
<style type="text/css">
#container { width: 100px; //whatever width you want }
#image {width: 100%; //fill up whole div }
#text { text-align: justify; }
</style>
<div id="container">
<img src="" id="image" />
<p id="text">oooh look! text!</p>
</div>
回答by JBrooks
This centers the "A" below the image:
这使图像下方的“A”居中：
<div style="text-align:center">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/opentoselect.gif" />
<br />
A
</div>
That is ASP.Net and it would render the HTML as:
那是 ASP.Net，它会将 HTML 呈现为：
<div style="text-align:center">
<img id="Image1" src="Images/opentoselect.gif" style="border-width:0px;" />
<br />
A
</div>
回答by JaydevSR
I am not an expert in HTML but here is what worked for me:
我不是 HTML 专家，但这里对我有用：
<div class="img-with-text-below">
<img src="your-image.jpg" alt="alt-text" />
<p><center>Your text</center></p>
</div>
