画像+テキストのセットを中央揃えで並べる方法

画像を表示して、その下にテキストを入れた物を１セットとして考え、それをずらーっと表示させる方法ってのを考えました。

ちょっと言葉での説明は難しいのですが

• 大元の横幅は可変
• 大元はセンター揃え
• 画像+テキストのセットが横にずらーっと並ぶ
• はじっこまで来たら、折り返す
• テキストは画像の下に表示

こんな感じです。

で、仕様するHTMLはこんな感じにしました。

<div>
<div>
    <span>
        <img src="画像.jpg" />
        ここにテキストが入ります
    </span>
</div>

<div>
    <span>
        <img src="画像.jpg" />
        ここにテキストが入ります
    </span>
</div>

<div>
    <span>
        <img src="画像.jpg" />
        ここにテキストが入ります。
    </span>
</div>

<div>
    <span>
        <img src="画像.jpg" />
        ここにテキストが入ります。
    </span>
</div>

<hr />
</div><!--wrapper-->

dlを使ってのマークアップでも出来るかなーって思ったんですが、どうもうまく行かないので、divで囲う事にしました。単純に考えて、このdivをfloatしてあげればいいのかなーって思ったんですが、それだと大元のセンター揃えが外れてしまいました。

あくまでセンターに揃えたまま、画像とテキストのセットを横に並べたい。

どうしたもんかなーと思い、調べた結果見つけたやり方がコチラ。

#wrapper{
	width:800px;
	text-align:center;
}

#wrapper div{
	display:inline;
	zoom:1;
}
#wrapper div span{
	display:table-cell;
	display:inline-block;
	width:160px;
}
hr{
	clear:both;
}

こんな感じで書いてあげると、センター揃えを維持したまま、画像+テキストのセットが横にずらーっと並びます。

divをdisplay:inline;でインライン要素にして横並びにしてあげて、その中を囲うspanにdisplay:table-cell;とdisplay:inline-block;でインライン要素の中での横幅を指定してあげる事によって、テキストが画像の下に回りこむって訳です。

ギャラリーサイトなんかで使えそうな手法ですね。

大元のセンター揃えと可変っていう条件が無かったら、他にも方法はあるんですけどね。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。