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

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

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

こんな感じです。

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

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

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

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

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

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

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

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