HTML:相对于图像的中心图像标题？

Question

我想编写 HTML 以相对于图像在中心对齐图像标题。

我想将图像和标题一起向左对齐。

无论包含元素的宽度如何，这都应该是正确的。

这是我目前所拥有的:

[unknown containing element]
<div style="align: left; text-align:center;">
<img src="white.jpg" height="31px" width="200px" />
<span>Some caption text</span>
</div>
[/unknown]

但它会将标题文本中心相对于包含元素对齐。

我需要修复什么？

谢谢!

Answer 1

如果您真的是指相对于图像，请使标题元素与图像一样宽，然后将文本居中。为了能够在标题元素上设置宽度，它需要是一个 block 元素，所以我将它从更改为:

<div style="align: left; text-align:center;">
    <img src="white.jpg" height="31px" width="200px" />
    <div class="caption">Some caption text</div>
</div>

.caption {
    width: 200px;
    text-align: center;
}

如果更容易的话，您可以使用内联 CSS 设置宽度。

<div style="align: left; text-align:center;">
    <img src="white.jpg" height="31px" width="200px" />
    <div class="caption" style="width: 200px">Some caption text</div>
</div>

.caption {
    text-align: center;
}