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

Question

I have some images with captions. The images are centered on the sites and the caption should be shown under the images. Very simple so far but here's the problem: the captions should be left-aligned and start under the bottom-left-corner of the image (like in newspapers)

I can think of a solution with tables but I don't like it because tables are here to show table data and not images and image captions

table solution:

<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

Hmmmmmmm

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

And

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

or what? :)

Answer 2

I would use <figure> and <figcaption> with a tiny bit of display: table to get the effect you want.

See this Example

Answer 3

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

Answer 4

Try something like this:

http://jsfiddle.net/tcF7M/1

Answer 5

Enclose your picture and title in a div, and give it an inline-block display style.

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

With CSS.

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