31

body 要素を HTML ページの中央に配置しようとしています。

ここに画像の説明を入力

基本的に、CSS で body 要素をdisplay: inline-block;そのコンテンツと同じ幅になるように設定します。それはうまくいきます。ただし、margin: 0px auto;ページの中央には配置しません。

これを修正する方法を知っている人はいますか？現在のように左に浮いているのではなく、大きな青い正方形をページの中央に配置したい.

これが私のCSSです：

body {
    display: inline-block;
    margin: 0px auto;
    text-align: center;
}
4

4 に答える 4

34 
    body
    {
        width:80%;
        margin-left:auto;
        margin-right:auto;
    }

これは、IE を含むほとんどのブラウザーで機能します。

于 2012-09-20T23:38:21.240 に答える
32

text-align: center; も適用します。次のようなhtml要素で：

html {
  text-align: center;
}

ただし、より良いアプローチは、本体ではなく集中化される内部コンテナー div を使用することです。

于 2012-06-03T18:16:13.337 に答える
9

ページの中央に配置するには、本文の幅を指定する必要があります。

または、すべてのコンテンツを div に入れて中央に配置します。

<body>
    <div>
    jhfgdfjh
    </div>
</body>​

div {
    margin: 0px auto;
    width:400px;
}

</p>

于 2012-06-03T18:16:48.563 に答える
3

幅を知っている人は、次のようなことができます

div {
     max-width: ???px; //px,%
     margin-left:auto;
     margin-right:auto;
}

また、本文に text-align:centerを設定しないことにも同意します。これは、コードの残りの部分を台無しにする可能性があり、そのときまたは将来、多くのことに個別にtext-align:leftを設定する必要がある可能性があるためです。

于 2015-05-26T20:04:20.673 に答える