html - 图片标题在居中图像下左对齐

Question

我有一些带标题的图片。图片以网站为中心，标题应显示在图片下方。到目前为止非常简单，但问题是：标题应该左对齐并从图像的左下角开始（就像在报纸上一样）

我可以想到一个带有表格的解决方案，但我不喜欢它，因为表格在这里显示表格数据而不是图像和图像标题

表解决方案：

<table class="centered-table">
  <tr><td class="image"><img src="stackoverflow.jpg" /></td></tr>
  <tr><td class="caption">Unanswered question on stackoverflow.com</td></tr>
</table>

Answer 1

我会使用<figure>and<figcaption>一点点display: table来获得你想要的效果。

请参阅此示例

Answer 2

嗯嗯嗯

<style>
    .centered {text-align:center;}
    .wrapper {display:inline-block; text-align:left;}
</style>

和

<div class="centered">
    <div class="wrapper">
        <div class="image"><img src="someimage.jpg" /></div>
        <div class="caption">Some caption text!</div>
    </div>
    <div class="wrapper">
        <div class="image"><img src="someimage.jpg" /></div>
        <div class="caption">Some caption text!</div>
    </div>
</div>

要不然是啥？:)

Answer 3

将您的图片和标题包含在一个 div 中，并为其赋予内嵌块显示样式。

<div id="article">
    <div class="title"><div>
        <img src="picture.jpg" />
        <em>Caption for the picture.</em>
    </div></div>
    <p>rest of the articlce...</p>
</div>

使用 CSS。

div.title
{
    text-align:center;
}
div.title > div
{
    display:inline-block;
    text-align:left;
}