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，它将是集中的，而不是 body。

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