不特定の数の横に並ぶブロック要素をセンタリングさせる

2008年9月 2日 13:55

【追記】CSSソースの記述順序が間違っていました。正しくは、「display: -moz-inline-box; display: inline-box;」の順で記述します。説明ではこの順序が逆でした。
順序が逆だと、Firefox3でも -moz-inline-boxが適用されてしまい、場合によっては表示が異なることがあります。（サンプルではFirefox3でも2でも特に問題はありません）

今回はページングなど、システムで動的に数が変わるような横に並ぶブロック要素のセンタリングを実現するCSSを紹介します。

「不特定の数の横に並ぶブロック要素をセンタリングさせる」サンプル

普通、ブロック要素を中央寄せする場合、IEは「text-align: center」、そのほかのモダンブラウザは「margin: 0 auto」を使って実現します。
しかし、これは同時に「width」に明示的に数値を指定しないとうまく動作しません。

また、モダンブラウザ向けの中央寄せの場合、ひとつのブロック要素がセンタリングされるのを想定してのCSSの指定です。ブロック要素を並べようとすると、floatを使うことになりますが、floatしてしまうとmarginで左右にautoを指定しても中央寄せにはならなくなってしまいます。

そもそも、複数のブロック要素をfloatによって並べたらセンタリングされません。
ではどうしたらいいでしょうか。その答えは、inline-blockです。

▼EntryMore▼

色々説明する前に、下のCSSソースを見てください。

CSSソース

今回の肝は、displayプロパティを複数読み込ませている点です。
まず最初の「display:inline-block」。これは、画像のimg要素などと同じように、インライン要素でありながらブロック要素としての性質を持つものです。

そのため、親要素の#pagingAreaの「text-align:center」の影響を受け、センタリングされる、というわけです。
しかし、この「display:inline-block」、IEは対応しておらず、Firefoxも3からの実装となるため、これだけではクロスブラウザになりません。

そこで、Firefox2でも同じ”ような”動作をする「-moz-inline-box」を使用します。
これは、Firefoxの独自実装のため頭に「-moz」のプレフィクスをつけて使用します。これで、「display:inline-box」を指定したのと”ほぼ”同じ動きをすることになります。
【追記】上記ソースの記述順序を「display: -moz-inline-box; display: inline-block;」の順に修正しました。

ここで”ほぼ”と言っているのは、これを指定した要素が取る状態がブロック要素とは若干ことなるため、内包したテキスト（サンプルではa要素）がセンタリングされません。
ここが”ほぼ”とつけた理由です。ではどうするか。

「display: -moz-inline-box」を指定した要素の内側にさらにブロック要素を配置します。（もしくは「display:block」でブロック要素にする）内側の要素にブロック要素を配置しても、親要素がinline-blockになっているため問題なく使えます。

そして、その内包したブロック要素（サンプルではa要素をブロック要素にしています）に対して親要素と同じ「width」を指定してやります。こうすることで無事、Firefox2でも同じ動きになりました。

さて、それでは最後の難関、IE対策です。
といっても、IEはそれほど難しくありません。IE向けに使用するのは「display: inline」と「zoom: 1」のみ。
ただ、他のブラウザにこれが読み込まれると都合が悪いので、サンプルではIE向けのハックとして「/display, /zoom」と書いています。

IEの場合、hasLayoutという隠しプロパティがあるため、これがtrueになっているとどうやらブロック要素的扱いになる模様。（あくまで自分の感覚です。実際の仕様がどうなのかは調べてません・・）

そこで、「display: inline」でいったんインライン要素にしたあと、「zoom: 1」でhasLayoutプロパティをtrueにします。こうすることで、擬似的な「inilne-block」要素となったわけです。

以上で、クロスブラウザな動的なブロック要素をセンタリングするCSSの完成です。