このCSSコードはどのようにWebページを中心にしていますか?
html,
body {
margin:0;
padding:0;
color:#000;
background:#fff;
}
#body {
width:870px;
margin:0 auto;
background:#ddd;
}
このCSSコードはどのようにWebページを中心にしていますか?
html,
body {
margin:0;
padding:0;
color:#000;
background:#fff;
}
#body {
width:870px;
margin:0 auto;
background:#ddd;
}
margin: auto;
任意のブロックを中央に配置します。
しかし、body
それは中心にあるのではなく、 div
IDが「body」であるだけです(これは少し誤解を招くと思います)。
クラスや ID に body/head/footer/etc と同じ名前を付ける場合は注意してください。投稿したコードは正常に機能します。これはmargin:auto
、ブロックが中央に配置されるためですが、その命名スキームにより、偶発的な変更が非常に簡単に発生する可能性があります。#wrapper
、#container
、またはそのようなものを使用してみてください。
何も問題はありません。
body { ... }
ページ全体、つまりドキュメントの本文を指します。
#body { ... }
確かにあなたの体の divID = "body"
です。CSS は、左右に固定幅と自動マージンを与えるため、正しいです。
これは最新のブラウザーで機能しますが、古いバージョンの IE でこれを機能させるには、さらにいくつかの属性を追加する必要があります。
html,
body {
margin:0;
padding:0;
color:#000;
background:#fff;
text-align:center; /* align contents to center which will align #body center */
}
#body {
width:870px;
margin:0 auto;
background:#ddd;
text-align:left; /* re-arranges contents of #body to default left */
}