CSS で簡単にメニューの上下中央揃えを実現する

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

IEでzoom:1とdisplay:inline;を同時に指定するとdisplay:inline-block;と同等の挙動を行うようです。

haslayoutがtrueの場合にdisplay:inlineを指定すれば、inline-blockのようになるようですが、zoom以外のプロパティはdisplay値の影響を受けるプロパティが多く、この方法はzoom以外では利用できないようです。

hasLayoutに関してはコリスさんが詳しく説明されています。
参考：IEでのCSSのバグを回避するhasLayout

以下のプロパティはdisplay:inlineと同時に指定してもhaslayhoutをtrueにできない。

× display:inline-block;
× height:any value;
× width:any value;

以下のプロパティはhaslayhoutをtrueには出来るものの、レンダリングそのものに影響を与えてしまう為、display:inlineと同時に指定してもinline-blockのようにはならない。

△ float:left or right;
△ position:absolute;
△ writing-mode:tb-rl;

zoomはhaslayhoutをtrueにして、レンダリングに影響を与えない為inline-blockのような振る舞いを行う。

○ zoom:any value;

zoomを利用したサンプルでメニューを作ってみました。

サンプル

ul{
	background:url(background.jpg);
	height:65px;
	width:1000px;
	padding-top:5px;
}
li{
	width:200px;
	list-style-type:none;
	text-align:center;
	color:white;
	display: table-cell;  
	vertical-align: middle; 
}
* html li{/* IE 6 */
	display:inline;
	zoom:1;
}
*+html li{/* IE 7 */
	display:inline;
	zoom:1;
}

liのbackgroundに画像を設置できない為ulのbackgroundに画像を設置しています。

上下中央揃えを行う方法は、他にはpositionを利用する方法が有名です。
参考：垂直中央の実装

関連エントリー

javascriptなしで背景が透けるカラムを実装するスタイルシート
商品画像掲載のページ構成CSS
input要素などにおけるIEのバグ
CSSでロールオーバーもどき
CSSで実現するスマートなロールオーバー

スポンサードリンク

«非常に軽いウイルス対策ソフト『イーセットスマートセキュリティ』 | メイン | Movable Type & SEO　セミナーのご案内»