html - 无论文本大小如何，如何在图像下居中显示文本

Question

假设我有一个图像。

<img src="lala.png" />

此图像具有width=400px;.

我想在这张图片下输入“Lala”。

<img src="lala.png" />
<br>
<span>Lala</span>

请注意，我将从数据库中获取这些图像和那些文本，图像的宽度固定为 400 像素，但是文本的大小当然会有所不同，所以我不能margin-left:100px;用来将文本推到中间因为它会在其他文本上看起来不对...

最好的方法是什么？

Answer 1

您可以使用 div 代替 span。

HTML：

<div class="underImage">Blah</div>

风格：

.underImage {
    width: 400px;
    text-align: center;
}

Answer 2

你可以这样做text-align:center;

<div style="text-align:center;">
<img src="lala.png" />
<br>
<span>Lala</span>
</div>

Answer 3

只需将图像和文本包装在一个元素中，并在包装​​元素上使用 text-align CSS 属性。

HTML

<p class="center-wrapper">
 <img src="lala.png" />
 <br>
 <span>Lala</span>
</p>

CSS

.center-wrapper { text-align: center; }

Answer 4

有几种方法可以实现这一点，但最灵活和最有效的方法是使用一个单元格表格，在一个caption元素中包含标题文本：

<table class="image">
<caption align="bottom">caption text</caption>
<tr><td><img ...></td></tr>
</table>

有很多人以准宗教为由反对使用表格，但它仍然是一种灵活的方式，不需要您明确设置文本的宽度（与让其由图像的宽度决定相反） ) 并且独立于 CSS 支持工作。