CSS によるボックス内容の上下中央揃え

CSSでボックスの垂直方向(上下)の位置揃えを指定するvertical-alignプロパティが有効なのは、インライン要素、及び表のセル要素のみです。displayプロパティには、ボックスを表のセル要素として表示するようにすることができる table-cell の値があります。この table-cell の値を用いることで、表のセル要素としてvertical-alignプロパティを適用することが可能になります。

しかし、問題はシェア数の多いIE6, 7 については、table-cellの値に対応していません。そこで、IE6,7についてはハックを利用したボックス内容の上下中央揃えにする方法を紹介します。

table-cell + vertical-align : middle ; による上下中央揃え

ul {
	display : table ;
	border : 1px solid #aaa ;
}
ul li {
	display : table-cell ;
	vertical-align : middle ;
	width : 100px ;
 }
.box1 {
	background-color : #ffc ;
}
.box2 {
	background-color : #fcf ;
}
.box3 {
	background-color : #cff ;
}

必要な指定は、上下中央揃えにしたいボックスの親要素にdisplay : table ;を指定すること、上下中央揃えにしたい横並びになるボックスにはdisplay : table-cell ;vertical-align : middle ;を指定することです。ボックスを横並びにするのにfloatの指定は不要です。

これだけでFirefoxやOpera、Safariではボックス内容の上下中央揃えが可能になります。

IE6, 7用のハックを加える

ul {
	display : block ;
	border : 1px solid #aaa ;
}
html:lang(ja) ul {
	display : table ;
}
ul li {
	vertical-align : middle ;
	width : 100px ;
	display : inline ;
	zoom : 1 ;
}
html:lang(ja) ul li {
	display : table-cell ;
 }
.box1 {
	background-color : #ffc ;
}
.box2 {
	background-color : #fcf ;
}
.box3 {
	background-color : #cff ;
}

まず、IE6, 7には、すべての要素に独自のhasLayoutプロパティというものが付与されています。このhasLayoutプロパティにはtruefalseの真偽値が与えられており、通常はfalseなのですが、ある特定のCSSプロパティの値と組み合わせられた要素についてはhasLayoutプロパティの値がtrueへと切り替わる仕組みになっています。

そして、hasLayout="true"になると、IE6, 7ではその要素は他の要素に影響されない独自のレイアウトをもつ不思議な振る舞いをするようになります。このhasLayout="true"にするための指定がzoom : 1 ;の指定です。zoomプロパティはIE独自のプロパティのため、他のブラウザでは無視されることになるので気にする必要はありません。あくまでもhasLayout="true"にするためだけのものです。表示が崩れているときなどもhasLayout="true"にすると改善される場合があります。

このIE6, 7の独自の振る舞いを逆手に利用することで、IE6, 7においてはvertical-alignプロパティが有効であるインライン要素(display : inline ;)でありながら、widthで指定された値も有効になる不思議なボックスを形成できます。結果、table-cellと同様の振る舞いが可能になります(ただし、高さは指定できないため横並びの背景領域まで揃えることはできません)。

なお、セレクタの前に:lang擬似クラスとして:lang(ja)を用いているのは、IE6, 7用のハックの指定をFirefox, Opera, Safariで上書きするための指定です。もし言語が日本語ではなく英語の文書であれば、:lang(en)に変更して用いる必要があります。

hasLayoutプロパティがtrueになるCSSプロパティと値

display
inline-block
height
<長さ>または<パーセンテージ>
float
leftまたはright
position
absolute
width
<長さ>または<パーセンテージ>
writing-mode
tb-rt
zoom
<数字>または<パーセンテージ>

サンプル

追記

2009年3月20日にリリースされたIE8もdisplay : table ;display : table-cell ;に対応しています(IE8からはhasLayoutプロパティが削除されました)。これによりInternet Explorerにおいても8以降であれば、display : table-cell ;+vertical-align : middle ;の方法で上下中央揃えが可能です。ただし、IE6, 7のシェアが残る間は、まだ当分このようなハックを併用する必要があるでしょう。

Updated / Published