Html 如何在图像下居中放置文本，而不考虑文本的大小

假设我有一个图像

<img src="lala.png" />

请注意，我将从数据库中获取这些图像和文本，图像的宽度固定为400px，但是文本的大小会有所不同，所以我不能使用左边距：100px；将文本推到中间，因为它在其他文本上看起来会出错

最好的方法是什么？

您可以通过文本对齐：居中

您可以通过文本对齐：居中

---

可以使用div而不是span

HTML:

---

可以使用div而不是span

HTML:

---

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

HTML

---

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

HTML

要实现这一点，有很多方法，但最灵活、最有效的方法是使用一个单单元格表，在标题元素中包含标题文本：

有许多人反对在准宗教的基础上使用表格，但这仍然是一种灵活的方式，不需要您明确地设置文本的宽度，而不是让它由图像的宽度决定，并且独立于CSS支持工作。

要实现这一点，但最灵活、最有效的方法是使用单单元格表，在标题元素中包含标题文本：

---

有许多人反对在准宗教的基础上使用表格，但这仍然是一种灵活的方式，不需要您明确地设置文本的宽度，而不是让它由图像的宽度决定，并且独立于CSS支持工作。

如果您的图像的宽度始终为400px，为什么不在图像下方创建一个宽度为400px的div，并带有文本align:center；如果你的图像的宽度总是400px，为什么不在你的图像下创建一个宽度也是400px的div，并用一个文本align:center；在它上面？当设置在一行上的文本比图像宽时会发生什么？是的，或设置宽度，但问题是如果没有这些设置，文本将占据可用宽度，您需要硬连线特定宽度。当设置在一行上的文本比图像宽时会发生什么？是的，或设置宽度，但关键是，如果没有这些设置，文本将占据可用宽度，您需要硬连线特定宽度。

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

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

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

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

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

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

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