CSSで横並びにしたリストを中央揃えにする

横並びにしたリストを中央揃えにしたい時につまづいた際の対処法。

リストタグはblock要素になるので、inline要素にしてあげる。
inline要素にすれば、floatを使わなくても勝手に横並びになってくれます。

でも、リストタグはblock要素として使っておきたい。
という時に display:inline-block; を使うとよいとのこと。

下が記述例になります。

ul {
　text-align: center;
}

li {
　display: -moz-inline-box;
　display: inline-block;
　/display: inline;
　/zoom: 1;
　padding-right: 10px;
}

li a {
　background-color: #fff2cc;
}

確かにうまくいきました。
これ、iphone/Androidなどでも当たり前ですがちゃんと表示されました！

横並びにしたリストを中央揃えにする - WEBMEMO

リストをfloatやdisplayで横並びにしたものを、ナビゲーション等でよく使...

hal-lab.cocolog-nifty.com