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

カテゴリ:CSSテクニック 2008年5月25日 16:53

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

アルバムや写真ギャラリーなど、画像をリストにして横並びに配置したいときがあると思います。
すべての画像が同じサイズであれば特に問題ないと思いますが、それぞのれ画像のサイズが違う場合、特に高さが小さい画像などが含まれる場合、縦方向に中央に配置するのがむずかしいと思います。
(テーブルを使えば比較的簡単にできますが、いちおう CSS 関連のブログなので CSS で実現する方法でw)

今回のテクニックの肝は、display のプロパティであるtable-cell,inline,inline-blockの 3 つを複合的に使うところです。
ちなみにこのテクニックは、自分が愛読している CSS HappyLife さんのところの 画像とかの横にあるテキストを上下中央に というエントリーを参考にさせてもらいました。

▼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: inlinezoom: 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 準拠モード用)

この記事のカテゴリー一覧を見る⇒CSSテクニック

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/80

トラックバック

リスト(li)タグで画像を並べる

例えば、下記のようなバラバラ画像を並べて表示したい場合、<Table>タグの入れ子はしたくない。■イメージ試行錯誤の上、たどり着いたのがコレ。<Table...

byぐらさぽメンバーレイコの部屋・つぶやき 2009年3月30日 13:44

コメント

1 - larkman さん

初めまして、「画像 並べる」で検索して拝見させて頂きました。n複数の画像を紹介されてるように並べられないのか?と悩んでいましたのでとても参考になりました。nサイトデザイン・文章構成が自分の好みでしたので理解しやすいのも良かったです。n若干、自分のPHPに加える為に改造させて頂きました。n

2008年12月17日 04:21

2 - えど Author Profile Pageさん

>>1 - larkman さんコメントありがとうございます(*'-')なんだかCSS以外もほめていただいて気恥ずかしいですね(^^;これ、なかなか覚えられないんですよね・・。nなので、仕事で使うときは、自分で言うのもなんですが毎回これをコピーして使ってます・・w

2008年12月17日 10:53

3 - ok.2nd さん

こんにちわ。nオープンソースとして公開している「MyHome Portal」のアルバムのサムネイル表示で、縦横混在の画像をセンタリングするのに参考にさせていただきました。nhttp://ok2nd.blog87.fc2.com/blog-entry-69.htmlCSSは難しいですね。

2009年1月 8日 19:10

4 - えど Author Profile Pageさん

>>3 - ok.2nd さんおお、参考にしていただきありがとうございます。nこうしてなにかに使われているのが見えるというのはとてもうれしいです。nありがとうございました!

2009年1月 8日 19:16

5 - BRAVEMUSIC さん

macのieがダメみたいです。n他はカンペキナノニ。。nでも使います。

2009年6月18日 14:36

6 - えど Author Profile Pageさん

>>5 - BRAVEMUSICさんコメントありがとうございます!nMac IE はチェックできる環境もない上にMSN のサイトも Mac IE では見れたものじゃなくなったのを機会に、nほぼチェック対象から外しています・・wnので、Mac IE はご勘弁ください(;´Д`)

2009年6月18日 15:09

7 - papain さん

こんにちはとても参考になりました。nただ、この縦横中央配置で1つ不思議なことがあります。nそれは<p><img src="sample01.gif" alt="" /></p>だとOKだけど<p><img src="sample01.gif" alt="" /></p>だとIE7では中央配置にならないという事なんです。n無視できる些細なことと言われればそうなのですが、nもし宜しければお教え頂けますと幸いです。

2009年9月 2日 19:55

8 - えど Author Profile Pageさん

>>7 - papain さんコメントありがとうございます!nほんとですね・・。なんだろうこれ・・。nおそらくの推測ですが、nimg 要素の後の空白文字がないと、p 要素が正確にインラインの高さを認識できないせいじゃないかな、と思ってます。nなので、半角スペースや TAB 文字があってもn正常に表示されるようです。nここらへんを目安に色々試してみたんですが、nどうも CSS だけでは解決できませんでした・・。nすみません・・。

2009年9月11日 10:53

9 - Anonymous さん

>>えどさんいえ、こちらこそ変な質問をしてしまいすみませんでした。nこの縦の中央配置は実に有意義なだけに、この思わぬ落とし穴は怖いですね。nCSSでは解決できないですし、ほんと何なんでしょう

2009年9月30日 16:14