CSSで中央配置（センターリング）する方法
ＣＳＳで中央配置の仕方をちゃんと理解していない人って案外いるみたいなので、詳しく解説しようかなーって思います。
div要素のようなブロックレベル要素をセンタリングするには「text-align」は使いません。「text-align」プロパティはインライン要素の位置揃えを指定するためのものですよ。
正しいセンタリング方法
XHTML
<div class="main">
<div>
<h2>ブロックレベル要素をセンタリング</h2>
<p>ブロックレベル要素</p>
</div>
</div>
CSS
.main {
width: 100%;
border: 1px solid #000;
}
.main div {
width: 80%;
border: 1px solid #FF0000;
margin: 0 auto;
}
センターリングしたい要素に「margin: 0 auto;」と指定するのが正しい方法です。
※上記ソースでborderを使っているのは分かりやすくする為だけです。
IEへの対策
IE5.5やIE5ではautoが対応になっていないので、対応させる為に下記ソースの用にします。
CSS
.main {
width: 100%;
border: 1px solid #000;
text-align: center;
}
.main div {
width: 80%;
border: 1px solid #FF0000;
margin: 0 auto;
text-align: left;
}
これをしておけば全てのブラウザでセンタリング表示出来ます。IE5.5やIE5の事はもう考えなくていいと思いますが、今はまだ指定しておいてもよいと思います。
サイト全体を中央に配置にする
最近Webサイトがセンタリングされているのって凄く多いと思うんですが、せっかくここまで解説したのでその例でも作っておきます。
サイト全体を包んでいるdiv要素のwrapperと言うidで包んだとして説明したいと思います。
XHTML
<body>
<div id="wrapper">
<h1>サイト全体を中央に配置にする</h1>
<p>サイト全体を中央に配置にする為のテキスト</p>
<!--/ #wrapper--></div>
</body>
CSS
body {
text-align: center;
}
div#wrapper {
width: 800px;
margin: 0 auto;
text-align: left;
border: 1px solid #FF0000;
}
たいへん参考になりました。
うまくセンタリングできました。
ありがとうございます。
2009年04月08日 15:26