« floatを指定した際に親要素の高さが算出されない場合 | トップページ | OperaでのLightbox 2のズレ »

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

リストをfloatやdisplayで横並びにしたものを、ナビゲーション等でよく使用します。
display: inlineでも横並びになるのですが、li要素間の改行が入ると隙間があいてしまうのがいやなので自分は通常floatを使用しています。

floatを使用した場合

css
li {
  float: left;
  padding-right: 10px;
}
li a {
   background-color: #fff2cc;
}


表示サンプル


displayを使用した場合

css
li {
  display:inline;
  padding-right: 10px;
}
li a {
   background-color: #fff2cc;
}


表示サンプル


しかし、横並びにしたリストを中央揃えにしたい場合、floatのleftやrightでは実現できません。float: centerがあればいいのにな・・・

という時に、display: inline-blockを使用します。
しかし、inline-blockはIE7以下とFirefox2に対応していないため、プロパティを追加します。


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;
}


表示サンプル


/display: inline;と/zoom: 1;はIE7以下用、display: -moz-inline-box;はFirefox2用の記述になります。
※上記の表示サンプルは、ココログで投稿するとソースが自動的に書き換わってしまうため、IE7以下とFirefox2では横並びになっていません。しかしソースをそのまま使用すればきちんと横並び中央揃えに表示されると思います。

==================================

こちらを参考にさせていただきました。

横並びリストを中央寄せにする

« floatを指定した際に親要素の高さが算出されない場合 | トップページ | OperaでのLightbox 2のズレ »

css」カテゴリの記事

コメント

コメントを書く

コメントは記事投稿者が公開するまで表示されません。

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1139838/31805420

この記事へのトラックバック一覧です: 横並びにしたリストを中央揃えにする:

« floatを指定した際に親要素の高さが算出されない場合 | トップページ | OperaでのLightbox 2のズレ »