Html 如何使文本在图像下方居中，而不是与图像相邻？

在下面的HTML标记中，我需要做什么才能将文本“what is this？”定位到图像下方？最初，我将文本放置在

标记中，但是，尽管文本位置正确，但我丢失了所需的超链接行为

谢谢

<div class="HorizontallyCentered"> 
    <a href="qr.aspx">
        <img alt="Image of JA10" src="files/ja10.png" height="150" width="150" />
        What is this?
    </a>
</div>

---

最可靠的方法是简单地使用

标记，但是HTML/CSS纯粹主义者建议您将类水平居中设置为与ja10.png相同的宽度，因为使用

标记来创建间距并不理想。

试试这个CSS

.HorizontallyCentered 
{
    text-align: center   
}
.HorizontallyCentered img
{
  display: block
}

---

这将迫使文本位于下一行。

无需测试，我非常确定这将完成工作：

HTML:

---

在严格的dtd中，我很好。也许我不够纯粹。您在内联元素（

a

）中放置了一个块级元素（

div

），这使得（x）html无效。在这种情况下，应使用

span

而不是

div

。

<div class="HorizontallyCentered"> 
    <a href="qr.aspx">
        <img alt="Image of JA10" src="files/ja10.png" height="150" width="150" />
        <span>What is this?</span>
    </a>
</div>

.HorizontallyCentered {
  text-align: center; 
}
.HorizontallyCentered img {
  display: block
}
.HorizontallyCentered span {
  text-align:center
}