ブロックレベル要素の横並びリストをセンタリングするCSSスニペット

ページ送りとかフッターナビ等で見掛ける中央寄せのCSSスニペットを紹介します。
リストをセンタリングするスタイルシート

センタリングパターン1

ブロックレベル要素をfloatした横並びリストをセンタリングする方法です。ポイントはpositionの基準位置となる要素が必要だということです。下記の例では「.fNav」が基準位置となる要素ですね。

.fNav {
  position: relative;
  overflow: hidden;
}

.fNav ul {
  position: relative;
  left: 50%;
  float: left;
}

.fNav ul li {
  position: relative;
  left: -50%;
  float: left;
}

センタリングパターン2

inline-blockを駆使してセンタリングする方法です。不特定数の要素が更新によって増えていく場合になどに最適ではないでしょうか。

.fNav ul {
  font-size: 0;
  text-align: center;
}

.fNav2 ul li {
  display: inline-block;
  font-size: 12px;
}

この方法は少し癖があって、ブラウザによって意にそぐわない半角スペースが挿入されてしまいます。以下のように反転するとわかりやすいですね。

この症状を解決するための記述は、うえでハイライトしているフォントサイズの指定です。親要素で一旦ゼロにして、子要素で本来のフォントサイズを適用させるという面倒があります。解消すれば以下のように接触したのがお分かりでしょうか？こうしたうえでマージンを用い、間を空けると良いでしょう。

ほかには、IE7以下の問題です。

IE7以下ではinline-blockが効かないのでCSSハックで以下の記述を付け足さなければなりません。面倒です。

.fNav ul {
  font-size: 0;
  text-align: center;
}

.fNav2 ul li {
  display: inline-block;
  font-size: 12px;
  /display: inline;
  /zoom: 1;
}

さいごに

パターン1のpositionのほうはラッピングする要素が必要だということ、パターン2では意図せぬスペースが生じることなどがデメリットといえます。状況に応じて記述をわけると良いと思います。