html - 中央の画像の下に左揃えの画像キャプション

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

あなたが望む効果を得るために、私は<figure>and<figcaption>を少しだけ使用します。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;
}