图像标题在居中图像下方对齐

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

嗯嗯嗯

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

我将使用<figure>和<figcaption>进行少量的display: table以获得所需的效果。

看这个例子

Answer 3

使用嵌套的div标签是另一种解决方案，如以下相关问题所示： 正确对齐图像标题

Answer 4

尝试这样的事情：

http://jsfiddle.net/tcF7M/1

Answer 5

将图片和标题括在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;
}