リスト要素をフロートさせて作成したナビゲーションをブラウザの中央に配置するスタイルシートをCSSplayから紹介します。
ナビゲーションのwidthは指定無しの成り行きです。
デモでは、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
Post on:2009年1月28日
こんにちわ。いつも有益な情報を提供してくださり、ありがとうございます。不肖、私、「可変幅のボタンをセンタリングする」というのを以前ジタバタしたことがありまして、そのときにわかったことから補足（というのもエラソーですが）をさせて頂きます。
こちらの方法はコレとよく似てます↓
http://pmob.co.uk/pob/centred-float.htm
少しちがいますけど、やってることは同じじゃないかと思います。んで、この方法ですと確かにセンタリングできるんですけど、右側に『見えない四角』ができちゃうみたいで、ブラウザによって（safari3とか）、ヨコスクロールパーが出ます。上のリンク先で説明されている通り、divにoverflow:hiddenを入れることによって回避できます。
どうでしょう？
> ふ さん
貴重な情報をありがとうございます。
紹介いただいたページ、非常に勉強になりました。
また、Safari3で横スクロールが出るのを確認しました。
ご教授通りに、divに「overflow:hidden;」したら解決しました。
補足、ありがとうございました。