CSSで中央配置（センターリング）する方法
- Category ：
- 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;
}
Comments
とても参考になりました。
これからもっとCSSについて勉強しようと思えました。
簡潔に書いてあり、非常に分かりやすくて参考になりました。ありがとうございます。
akamotoさん。ありがとうございます！今後も参考になれるような記事をかけるように頑張りたいと思います！
大変参考になりました。
cssによるセンタリングを色々と調べましたがこちらのサイトによる解説が一番分かりやすかったです。
MIYAさん
度々有難うございました。
まずはCSSの部分を基礎からもう少し確り勉強したいと思います。
今後も当サイトを参考にさせていただきます。
そういう現象は聞いた事がないのではっきりとは言えませんが、自分は原因個所をひとつ、ひとつ、探しますね。
#my_body 内に書いてある要素を全部消して検証し、中央に配置されるか試して、そこで中央に配置されるなら、内部の要素に原因がある事が分かるので、一つ、一つ試しては原因をつきとめるしかないですね…
こういうバグを探す事も自分は勉強だと思うので頑張って下さい。
MIYAさん、回答ありがとうございます。
基本的にはサイトの中央に配置されるようになりました。
しかし、画面の大きさと解像度で左に寄ったり、左右に伸びたりしてしまいます？？？
ネットカフェでチェックしたところ、
そこのブラウザはIE8で
Dispは19インチワイドのWXGA（1440x900）です。
基本的に左右に伸びて表示されてしまい（画像も含めて）
解像度1024x768だと中央に配置されますが、
解像度1152x864に上げると左のほうに寄ります。
他のサイトは中央に配置されているのに？？？
なぜなんでしょう？
ご迷惑をおかけし、申し訳ありません。
ぜひアドバイスお願いします。
KEISUKEさん。
body 要素に text-align: center; をつけたらサイト全体をセンタリングする事が出来ますよ。
その際サイト全体を包んでいる #my_body に text-align: left; をを付けておいて下さいね。
ウェブ制作初心者です。
理解力がなくてすみません。。
現在制作中のサイトのCSSを以下のように書いてます。
現在は左側に寄ってますが、
サイト全体をセンタリングするのには、どのようにすればよろしいでしょうか？
#my_bodyでサイト全体を包んでます。
body {
margin: 0px;
padding: 0px;
}
#my_body {
margin:0 auto;
width:850px;
_width:900px;
}
div.title {
float: left;
width: 150px;
_width: 200px;
padding: 16px;
}
div.intro {
margin: 0px 0px 0px 182px;
_margin: 0px 0px 0px 232px;
padding: 32px 8px 8px 8px;
_padding: 8px;
}
div.intro h1 {
font-size: 70%;
font-family: "verdana",sans-serif;
font-weight: normal;
color: #660000;
}
div.shikiri {
clear: both;
}
･･･････
すみませんが、是非教えてください。
木村さん
わざわざコメントを頂きありがとうございます＾＾
今後とも参考になれる記事をかけるように頑張りたいと思います！
たいへん参考になりました。
うまくセンタリングできました。
ありがとうございます。