[CSS]フロートしたナビゲーションを中央に配置するスタイルシート

リスト要素をフロートさせて作成したナビゲーションをブラウザの中央に配置するスタイルシートをCSSplayから紹介します。

ナビゲーションのwidthは指定無しの成り行きです。

デモのキャプチャ

Centering Float Left Menus

デモでは、CSSハックやinline-block, table/table-cellを使用せずに実装されています。

下記に、それをシンプルにしたデモをアップしました。
シンプルにしたデモ

IE6/7/8beta2, Fx3, Op9.5, Safari3, Chrome1で正常に動作しました。IE5.5, Fx2はダメでした。

追記:その1
リストを内包するdivに「text-align:center;」をしたら、上記ブラウザ+Fx2に対応できました。
なんで、きくのだろう、、、?
シンプルにしたデモ(Fx2対応)
追記:その2
「ふ」さんのコメントにより、Safari3で横スクロールが出る現象を回避するため、divに「overflow:hidden;」をしました。上記のデモに上書きです。
参考:Centred Floats

sponsors

top of page

©2018 coliss