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

Presented by Nishishi via Movable Type. Last Updated: 2017/06/21. 12:29:37.

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は書けません。(書くと投稿が拒否されますのでご注意下さい。)

※ご投稿頂いた内容は、掲載前に管理者が確認する設定にしている場合があります。たいていは数日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連する記事など

※下記には、本サイト内外の関連記事などが8本くらい自動で表示されています。

にししふぁくとりー Sakura scope内限定での主要なカテゴリ

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