0

このCSSコードはどのようにWebページを中心にしていますか?

html,
body {
    margin:0;
    padding:0;
    color:#000;
    background:#fff;
}
#body {
    width:870px;
    margin:0 auto;
    background:#ddd;
}
4

4 に答える 4

4
margin: auto;

任意のブロックを中央に配置します。

しかし、bodyそれは中心にあるのではなく、 divIDが「body」であるだけです(これは少し誤解を招くと思います)。

于 2012-09-20T13:18:46.097 に答える
2

クラスや ID に body/head/footer/etc と同じ名前を付ける場合は注意してください。投稿したコードは正常に機能します。これはmargin:auto、ブロックが中央に配置されるためですが、その命名スキームにより、偶発的な変更が非常に簡単に発生する可能性があります。#wrapper#container、またはそのようなものを使用してみてください。

于 2012-09-20T15:59:02.037 に答える
1

何も問題はありません。

body { ... }ページ全体、つまりドキュメントの本文を指します。

#body { ... }確かにあなたの体の divID = "body"です。CSS は、左右に固定幅と自動マージンを与えるため、正しいです。

于 2012-09-20T13:20:23.943 に答える
0

これは最新のブラウザーで機能しますが、古いバージョンの 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 */
}
于 2012-10-09T05:37:54.973 に答える