如何将文本置于图像下方，而不是与图像相邻？

Question

在下面的HTML标记中，我需要做什么才能获得文本“这是什么？”被定位在图像下面？最初，我将文本放在<p>标签中，但是，虽然文本位置相同，但我丢失了所需的超链接行为。

谢谢！

<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>

Answer 1

试试这个css

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

应强制将文字放在下面一行。

Answer 2

最可靠的方法是使用<br />标记，但HTML / CSS纯粹主义者会建议您将类 Horizo​​ntallyCentered 设置为与ja10相同的宽度使用<br />标签创建间距的.png不被认为是理想的。

Answer 3

如果没有测试，那么多余的代码我很确定这会完成这项工作：

HTML：

<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>

CSS：

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