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

横並びにしたリストを中央揃えにしたい時につまづいた際の対処法。
リストタグはblock要素になるので、inline要素にしてあげる。
inline要素にすれば、floatを使わなくても勝手に横並びになってくれるのだ。
でも、リストタグはblock要素として使っておきたい。
という時にdisplay:inline-block;を使うとよいとのこと。

下が記述例になります。

CSS
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などでも当たり前ですがちゃんと表示されましたー!

参考URL
横並びにしたリストを中央揃えにする

Comments

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です