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

我想编写 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]

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

我需要修复什么？

Thanks!

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

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