"CSS Tips Factory" : Presented by Nishishi via WordPress.

ボックスをセンタリングする現実的な方法 [ボックス, 配置]

pやdiv要素で作るボックスやtable要素で作る表組みなどをセンタリングしたい場合は、ボックスのマージン(margin)を「auto」に指定します。すると、そのボックスはセンタリングされます。

なぜなら、左右のマージンが自動的に決定された結果、左右に同じだけの余白が設けられるためです。左右の余白量が同じなのでセンタリング(中央寄せ)になると。

例えば、横幅を300ピクセルにしたボックスをセンタリングするソースは以下のような感じ。

div.test {
   width: 300px;
   margin: auto;
}

marginプロパティに値autoを指定すると、左右の余白は自動で決定され、上下の余白はゼロになります。上下の余白をゼロではなく任意の値にしたい場合は、以下のように上下の値を指定してやれば良いでしょう。

div.test {
   width: 300px;
   margin: 12px auto;
}

上記の場合は、上下の余白は「12ピクセル」になり、左右の余白は自動で決定(=センタリング)されます。

まあ、これだけなら非常に簡単なことですが…。
問題は、marginプロパティに値autoをして正しく解釈されるのは、モダンブラウザだけだという点です。古いIEや、最近のIEでも互換モードのIEだと、marginプロパティにautoを指定しても無視されます。

では、どうすればセンタリングされるのか…というと、text-alignプロパティを使います。text-alignプロパティは、文字列の配置(左寄せ・センタリング・右寄せ・両端揃え)を指定するプロパティです。
スタイルシートの仕様的には、ボックスの配置には使えません。ボックスに対して使うと、ボックスそのものの配置ではなく、ボックス内部のテキストの配置として解釈されます。

しかし。

古いIEや、IEの互換モードでは、このtext-alignプロパティを使って、ボックスの配置が行えてしまいます。これを活用すれば、IEでもボックスのセンタリングが可能です。ただし、HTML側の修正も必要。
以下のような感じ。まずは、HTML。

<div class="cover">
   <div class="test">300ピクセルのボックス</div>
</div>

センタリングしたいボックスの外側に、カバー用ボックス(coverクラスのdiv要素)を加えています。
で、次のようにスタイルシートを書きます。

div.cover {
   text-align: center;
}
div.test {
   width: 300px;
}

センタリングしたいdiv要素(testクラス)の外側に、さらにdiv要素(coverクラス)を記述します。そして、そのdiv要素(coverクラス)に対して、text-alignプロパティに値centerを指定します。
すると、古いIEやIEの互換モードでは、div要素(coverクラス)内に含まれるあらゆるものをセンタリングするので、div要素(testクラス)そのものもセンタリングできます。

ボックスの配置を指定するために、HTMLに修正を加えて「外側のdiv要素」を付ける必要があるためスマートではありません。でも、この方法でセンタリングは可能になります。

しかし…。

こうすると、モダンブラウザで表示させた場合に、ボックスがセンタリングされず、ボックス内部の文字列だけがセンタリングされてしまうという問題が起こります。それがスタイルシートの正しい解釈なので当然ですね。

そこで、それらをすべて解決するために以下のよーにスタイルシートを書きます。

div.cover {
   text-align: center; /* (A)古いIE向け */
}
div.test {
   width: 300px;
   margin: auto; /* (B)モダンブラウザ向け */
   text-align: left; /* (C)古いIE向け記述の後処理 */
}

古いIE向け記述(A)を使うと、モダンブラウザでは、ボックス内部の「テキスト(文字列)」をセンタリングしてしまいます。これは、スタイルシートの解釈としては正しいですが、製作者の目的には合致しません。
そこで、その記述を無効化するために、「(C)古いIE向け記述の後処理」が必要になります。これは、センタリング指定されてしまっているテキストを左寄せに戻す記述です。

このように記述すれば、「古いIEやIEの互換モード」と「モダンブラウザ」の両方でボックスをうまくセンタリングさせられます。

※補足
ここでは、センタリングされるボックスの横幅を「300px」としています。古いIEやIEの互換モードでは、この「300px」には内側の余白(padding)も含まれます。でも、スタイルシートの正しい解釈では余白量は含みません。細かな差異が問題になるようなレイアウトをしている場合、この点でデザインが崩れる可能性がある点にも注意が必要です。
その点については、また別の項目で説明します。

このCSS TIPSへのコメントはお気軽に! [コメントはまだありません。]

著者紹介

主要なカテゴリ

このCSS TIPSへのコメント・トラックバック

コメントはまだありません。

コメント投稿欄 このCSS TIPSに対するコメント投稿を歓迎します。

(必須)

(必須) ※公開されません

※公開(リンク)されます

コメント:

※投稿内容によってはフィルタによって保留扱いとなる場合があります。その場合は承認後に掲載されます。
※本文中にURLっぽい文字列を記述すると、投稿内容はスパム扱いとなって無視されてしまう場合がありますので書かないようご注意下さい。

トラックバック

このCSS TIPSへのトラックバックURLは以下の通りです。

※言及リンクがないトラックバックは拒否されますのでご注意下さい。また、文字コードはUTF-8でお送りいただける方が望ましいです。