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

カテゴリ:CSSテクニック 2008年9月 2日 13:55

【追記】CSS ソースの記述順序が間違っていました。正しくは、display: -moz-inline-box; display: inline-box; inline-block;の順で記述します。説明ではこの順序が逆でした。
順序が逆だと、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 要素などと同じように、インライン要素でありながらブロック要素としての性質を持つものです。

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

Firefox2 対策

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

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

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

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

IE 対策

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

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

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

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

この記事のカテゴリー一覧を見る⇒CSSテクニック

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/98

コメント

1 - fuji さん

floatを使ってる限りはセンタリングできないんですね…orzこの記事のお陰でようやくやりたかったことができました、ありがとうございました!

2008年11月21日 04:09

2 - えど Author Profile Pageさん

>>1 - fujiさんコメントありがとうございます!nこの記事が元で問題解決できたようでとてもうれしいです(*'-')

2008年11月21日 09:35

3 - chata さん

これはすごい!nfloatしたBOXをセンタリングできるとは!n感動

2009年9月 9日 05:59

4 - えど Author Profile Pageさん

>>3 - chata さんコメントありがとうございます!nブロック要素の性質を持たせつつ、センタリングってなにげにほしいときあるんですよね。nそういったときに重宝するテクニックなのでぜひ利用してみてください(*'-')

2009年9月 9日 10:03