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

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

我将使用

和

以及一点 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;
}