異なるサイズの画像を縦横中央配置にしてリスト状に並べる

▼EntryMore▼

今回は、IEの互換モードと準拠モードの2通りを作ってみました。
CSS(標準)のソースは、モダンブラウザ用に読み込ませるCSSです。
その下にあるCSSは、それぞれ互換モードと準拠モードでそれぞれ読み込ませるCSSが異なります。

モダンブラウザ用には、display: table-cellを使って画像を含むブロック要素をセルと同じ動きにさせます。
これにより、vertical-align: middleで、画像が中央に配置されます。
widthとheightは、それぞれ画像の最大サイズを指定します。（通常はサムネイル画像のサイズかな）
そうすることで、サムネイルの最大サイズで幅・高さが固定され、それに満たない小さなサムネイル画像が縦横中央に配置される、というものです。（横の中央配置は、通常通りtext-align: center）

ただ、このままだとdisplay: table-cellに対応していないIEは正常に表示されません。
そこで、CSS HappyLifeさんの「画像とかの横にあるテキストを上下中央に」のエントリーを参考に、display: inlineとzoom: 1でこれを補います。

これの詳細は上記のエントリーを見ていただくとして、大まかな概要を書くと、画像を含むブロック要素をインライン要素にし、かつhasLayout対策としてzoomを使用します。（hasLayoutが設定されていないと、なぜか正常に動かない）
そして、そのインライン要素の行幅を画像の最大の高さと同じ幅に設定します。（サンプルだと90px）
こうすることで、インライン要素の行幅と高さが一致し、結果縦に中央配置される、というわけです。

ただこれではまだ問題があり、IE6ではこれでも正常に動きません。
何回か検証した結果、インラインブロック要素（画像などの置換要素）が前にないと、それのみでは行の高さが設定されないようです。
なので、苦肉の策ですが、中央表示したい画像の前に、幅0のインラインブロック要素を配置することで、強制的に行幅を設定しています。（span要素のdisplay: inline-blockがそれです）

ここまで設定して、やっとFirefox、Safari、Opera、IE6、IE7で正常に画像が中央表示になりました。
ここまでめんどくさいことをやるならテーブルでやったほうが・・とも思いますが、CSSでいかに色々な表現をするか、をコンセプトにしてるので今回のサンプルを作ってみました。
個人的な意見としては、それほどHTMLを汚してないのでぎりぎりセーフかな、なんて思っていますが・・どうでしょうか。

HTMLソース

CSSソース(標準)

CSSソース(IE互換モード用)

CSSソース(IE準拠モード用)