web-dev-qa-db-ja.com

体をページの中央に配置する方法は？

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

enter image description here

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

誰もこれを修正する方法を知っていますか？大きな青い正方形をページの中央に配置し、現在のように左に浮かせないようにします。

これが私のCSSです。

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

Text-align：centerも適用します。 html要素で次のようにします。

html {
  text-align: center;
}

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

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

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

30
Freakishly

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

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

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

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

9
SRN

do幅がわかっているものについては、次のようなことができます

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

また、ボディにtext-align：centerを設定しないことにも同意します。コードの残りの部分を台無しにする可能性があり、個別に設定する必要がある場合があるためですtext-align：leftその時または将来の多くのことについて。

3
DardanM