图像标题左对齐，图像中心下方对齐。

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>

- domueni

Answer 1

我会使用<figure>和<figcaption>标签，并加上一点display: table来获得您想要的效果。

请参考此示例。

- Madara's Ghost

Answer 2

Hmmmmmmm

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

或者呢？:)

- Marco Johannesen

---

+1。但是删除图像周围的div，它是无用的。我还会添加这个CSS：.wrapper img { display: block; text-align: center; }以防万一标题使.wrapper比图像更大。 - ANeves

在我看来，为每个元素创建一个容器是个好主意，这样你就可以重新设计/布局HTML而不必更改它。在这里，你可以控制每个元素。对于img css，你是正确的，想法很聪明！ :) - Marco Johannesen

Answer 3

将您的图片和标题放在一个 div 中，并给它一个 inline-block 的显示样式。

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

- user912695