▼EntryMore▼

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

モダンブラウザ用 CSS

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

そうすることで、サムネイルの最大サイズで幅・高さが固定され、それに満たない小さなサムネイル画像が縦横中央に配置される、というものです。（横の中央配置は、通常通り text-align: center）

IE 対策

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

これの詳細は上記のエントリーを見ていただくとして、大まかな概要を書くと、画像を含むブロック要素をインライン要素にし、かつ hasLayout 対策として zoom を使用します。（hasLayout が設定されていないと、なぜか正常に動かない）

そして、そのインライン要素の行幅を画像の最大の高さと同じ幅に設定します。（サンプルだと 90px）
こうすることで、インライン要素の行幅と高さが一致し、結果縦に中央配置される、というわけです。

さらにIE6 対策

ただこれではまだ問題があり、IE6 ではこれでも正常に動きません。
何回か検証した結果、インラインブロック要素（画像などの置換要素）が前にないと、それのみでは行の高さが設定されないようです。

なので、苦肉の策ですが、中央表示したい画像の前に、幅0のインラインブロック要素を配置することで、強制的に行幅を設定しています。（span 要素のdisplay: inline-blockがそれです）

ここまで設定して、やっと Firefox、Safari、Opera、IE6、IE7 で正常に画像が中央表示になりました。

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

HTML ソース

CSS ソース(標準)

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

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