CSS で簡単に上下中央揃えを実現する

2008年3月12日水曜日

たまたま閃いたのですが、CSS で上下中央揃えは実は意外と簡単にできました。demo を用意しましたので、いろいろな Web ブラウザで見てみてください。今のところ、

Firefox 1, 2
Netscape 6, 7.1
Safari 2, 3
Opera 9.2
IE 5.01, 5.5, 6, 7 ( inline-block で実現)

で意図した通りに表示されることを確認しました。で!!上下中央揃えの方法を解説したいと思います。中央揃えにしたい要素に対して、display:table-cell; を指定します。( table-cell が指定された要素には vertical-align が有効になります。)

div.sample1 div　{
display:table-cell;
}

ただし、 IE 6, 7 にはdisplay:table-cell; は無視されます。 IE6, 7 に対しては display:inline-block; と同等の効果を与えます。( inline-block が指定された要素にも vertical-align が有効になります。) IE6, 7 で display:inline-block; と同等の効果を与えるには

* html div.sample1 div{/* IE 6 */
display:inline;
zoom:1;
}

*:first-child+html div.sample1 div{/* IE 7 */
display:inline;
zoom:1;
}

を指定します。( * html は IE 6 用の CSS ハック、*:first-child+html は IE 7 用の CSS ハックです。) そして、vertical-align:middle; を指定します。要素の display がtable-cell または、inline-block なので vertical-align が有効になります。

div.sample1 div{
vertical-align:middle;
}

( このとき、vertical-align:top;を指定すれば上揃えに、 vertical-align:bottom; を指定すれば下揃えになります。 ) まとめると、<div class="sample1"> 内の3つの div の縦位置を中央にそろえる場合、HTML ソースは

<div class="sample1">
<div>
aaaa
</div>
<div>
aaaa<br />
aaaa
</div>
<div>
aaaa<br />
aaaa<br />
aaaa
</div>
</div>

となり、これに適用する CSS は

div.sample1{}

div.sample1 div{
display:table-cell;
width:100px;
margin-bottom:1px;
vertical-align:middle;
}

* html div.sample1 div{/* IE 6 */
display:inline;
zoom:1;
}

*:first-child+html div.sample1 div{/* IE 7 */
display:inline;
zoom:1;
}

となります。

Mac 版 IE に対応するコード

hamashun さんにアドバイスをいただき、Mac 版 IE 5.2 にも対応できる demo も用意しました。 Mac 版 IE 5.2 は、display プロパティで table-cell はサポートできていませんが、inline-block をサポートしているのでバンド・パス・フィルタを使ってMac IE 5.2 用に少し追記し、

div.sample1{ }

div.sample1 div{
display:table-cell;
width:100px;
margin-bottom:1px;
vertical-align:middle;
}

* html div.sample1 div{/* IE 6 */
display:inline;
zoom:1;
}

*:first-child+html div.sample1 div{/* IE 7 */
display:inline;
zoom:1;
}

/*\*//*/
* html div.sample1 div{
display:inline-block;
}
/**/

のように指定します。CSS の詳細度の都合で、セレクタに * html も書いています。また、Mac IE 5 では、HTML ソース上で inline-block にした要素同士の間に改行が入っていた場合、スペースができますので、改行せず HTML のソースを書く必要があります。

トラックバックURI

http://www.yomotsu.net/wp/wp-trackback.php?p=387

divの中で下揃えに配置 » HAYAZO Satisfaction Days!さんからのコメント

2009年4月9日 16:32

[...] http://www.yomotsu.net/wp/?p=387 [...]

IE6にも対応、個人的「天地中央寄せ」決定版メモ - Tools&Toolzさんからのコメント

2009年6月20日 12:57

[...] CSS で簡単に上下中央揃えを実現する | ヨモツネット・・・inline-blockを使ったやり方。最新米に分かり易そうなのあり [...]

匿名さんからのコメント

2009年12月7日 12:02

ありがとうございました。助かりました。

ハッケンブログ（発見部LOG）さんからのコメント

2010年4月9日 15:33

CSSでIMGの横のテキストを上下中央揃えに出来ない対処 イメージの横のテキストを上下中央に表示するには親コンテナに設定するのが一般的です。今回なぜか上手く表示されない不具合が生じたので、繧…

IE7での上下中央寄せ « 或る日常のブログ?さんからのコメント

2010年6月2日 23:21

[...] 以前、ヨモツネットさんを見ていたので簡単に修正できると思ったが、そうはいかなかった。というのも今回修正するのは [...]

each関数を使ったテキスト上下中央揃え « TheDesigniumさんからのコメント

2010年6月4日 18:11

[...] ※CSSでの中央揃えについては、すでにto-Rさんとヨモツネットさんのところでご紹介されていますので詳しくはそちらをご覧ください。 [...]

IE7での上下中央寄せ | 或る日常さんからのコメント

2010年6月28日 22:22

[...] 以前、ヨモツネットさんを見ていたので簡単に修正できると思ったが、そうはいかなかった。というのも今回修正するのは [...]

匿名さんからのコメント

2010年7月16日 16:37

FirefoxやIE8だと背景色も同じ高さになりますが IE6とIE7ではやはり無理でしょうか？