低価格、短納期、高品質なWebサイト制作|ScuderiaWeb

リストのセンタリング

メニューやページ遷移用ボタン、パンくずなど、論理的にマークアップするためにリストタグ（<ul><li>～</li></ul>）を使用することは多々あります。それらリストを、デザイン上の都合で、float:leftなどで横並びすることも、もちろんあります。
ひとつひとつのリスト（<li>～</li>）の幅が固定の場合は良いのですが、それが可変の場合、つまりリスト全体の幅が不明なときにセンタリングする方法をご紹介します。

サンプル

このようなページ遷移用ボタンをリストタグで表示します。

(X)HTML

<ul id="paging">
	<li><a href="/page1/">1</a></li>
	<li><a href="/page2/">2</a></li>
	<li><a href="/page3/">3</a></li>
	<li><a href="/page4/">4</a></li>
	<li><a href="/page5/">5</a></li>
</ul>

CSS

#paging {
	text-align: center;
}
#paging li {  
	background-color: #e0e0e0;
	border: 1px solid #000;
	display: -moz-inline-box;
	display: inline-block;
	line-height: 25px;
	width: 25px;
	height: 25px;
}
* html #paging li{  
	display: inline;
	margin-right: 3px;
	zoom: 1;
}
*+html #paging li {  
	display: inline;
	margin-right: 3px;
	zoom: 1;
}
#paging li a {
	display: block;
	text-decoration: none;
	width: 25px;
}

ポイントはdisplay
全ブラウザでinline-blockが対応しているればいいのですが、FireFoxやIEでは対応していません。
FireFoxで同じことをするための -moz-inline-box、IEの場合はinlineとzoomで結果的に同じように表示させています。