にしし ふぁくとりー(西村文宏 個人サイト)

Presented by Nishishi via Movable Type. Last Updated: 2015/09/22. 13:24:05.

CSSでのボックスのセンタリング

スタイルシートでボックスをセンタリングしたい場合の正攻法は、marginプロパティの値にautoを指定する方法。marginプロパティの値にautoを指定すると、左右の余白を均等に取ってくれるので、結果としてセンタリングされることになります。

…が、この方法では、IEが解釈してくれません。

そこで、marginプロパティに値autoを指定すると同時に、text-alignプロパティに値centerを指定します。すると、IEでもボックスをセンタリングしてくれます(※スタイルシート的には誤った解釈)。そのままだと、スタイルシートを正しく解釈するブラウザで、ボックスの中身(のテキスト)がセンタリングされてしまうので、ボックスに対して、text-alignプロパティに値leftを指定して、(テキストを)左寄せに戻しておきます。

…なんとも面倒です。

言葉だとワケわかんないので、ソースを書いてみると、次のようになります。div要素の中に、センタリングしたいp要素(横幅を80%に指定)がある場合と思って下さい。

div {
   text-align: center; /* for IE */
}
p {
   width: 80%;
   margin: auto; /* 正攻法 */
   text-align: left; /* IE対策の副作用対策 */
}

で、これは、センタリングしたいボックスの中身の横幅が(欲しい横幅よりも)小さい場合向け。例えばtable要素とか。

上記で挙げたように、p要素とかデフォルトで横幅を限界まで占有してくれるボックスの場合は、正攻法を使うよりも、左右の余白に同じ値を指定することでセンタリングさせるのが楽。これなら、1行で済むし。

p要素でなくて、table要素みたいなのでも、ボックスの中身がとってもたくさんあって、(何も指定しなければ)ウインドウの端から端まで占拠しちゃうよ…という場合にも有効。

p要素をセンタリングしたい場合、次のように書くだけでしょう。

p {
   margin: 0px 10%;
}

これだと、p要素の左右に、それぞれ10%分の余白ができます。左右の余白が均等だから、結果、センタリングされているように見えます。(左右それぞれ10%だから、ボックスの横幅は80%になります。)
この方が楽。

※text-alignプロパティに値centerを指定することで、その中身のボックスがセンタリングされるのは、スタイルシートとしては誤った解釈。本来は、ボックスそのものがセンタリングされるのではなく、ボックス内のテキストがセンタリングされることになります。(IEの解釈はおかしくて、ボックスそのものをセンタリングしちゃう。)

コメント

参考になりました~。

投稿者 rupy : 2006年06月11日 17:51

お役に立てたようで嬉しいです。(*^_^*)

投稿者 にしし : 2006年06月12日 23:54

よくわかりました

投稿者 pa : 2007年10月22日 11:14

コメント数: 3件

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

保存しますか?



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※投稿内容は、実際にページ上に掲載される前に、管理者によって確認される設定にしている場合があります。その場合は、投稿後にその旨が表示されます。たいてい1~2日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

トラックバック

このエントリーへのトラックバックURLを表示するにはここをクリック
※スパム防止のため、トラックバックURLは別ウインドウで表示します。(JavaScriptが有効でないと表示されません。)

--- 当サイト内を検索 ---