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

时间:2011-08-31 13:02:49

标签: html image caption

我有一些带字幕的图片。 图像以网站为中心,标题应显示在图像下方。到目前为止非常简单,但问题是: 字幕应左对齐并从图像的左下角开始(如报纸)

我可以考虑使用表格的解决方案,但我不喜欢它,因为表格在这里显示表格数据而不是图像和图像标题

表解决方案:

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

5 个答案:

答案 0 :(得分:3)

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>

还是什么? :)

答案 1 :(得分:3)

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

请参阅 Example

答案 2 :(得分:1)

使用嵌套div标签是另一种解决方案,如此相关问题所示: Correctly aligning image captions

答案 3 :(得分:0)

尝试这样的事情:

http://jsfiddle.net/tcF7M/1

答案 4 :(得分:0)

将您的图片和标题包含在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;
}