html - 本文をページの中央に配置するには?

Question

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

ここに画像の説明を入力

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

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

これが私のCSSです：

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

score 34 · Accepted Answer

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

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

score 32 · Accepted Answer

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

html {
  text-align: center;
}

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

score 9 · Accepted Answer

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

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

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

</p>

score 3 · Accepted Answer

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

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

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

4 に答える 4