<ul><li> 横に並べたリストの中央揃え
Posted on
- 横並びにしたリストを中央に揃える方法はいくつかあります。
基本的には、「display: inline-block」を使ってます。
通常floatでleftやrightなどを使ってますが、「float: center」というプロパティがないので利用してますが、IE7以下やFirefox2に対応していないため、下記のプロパティを追記します。
display: -moz-inline-box; /display: inline; /zoom: 1;
下記は、このサイトのグローバルナビゲーションの記述です。
<blockquote>nav { width: 950px; margin: 0px auto; padding: 0px 10px 0px 10px; overflow: hidden; font-size: 1.5em; font-weight: bold; } nav ul { text-align:center; } nav ul li { list-style: none; display: inline-block; display: -moz-inline-box; /display: inline; /zoom: 1; padding: 0px 3px 0px 3px; }</blockquote>他にもやり方は、あると思いますが今のところがこれが一番分かりやすいです。

