Question

HTML：

<body>
    <p>Some content</p>
</body>

CSS：

body {
    margin: 0 auto;
    width: 470px;
    background-color: cyan;
}

https://jsfiddle.net/tsLu98tL/

为什么这不会一直居中，为什么颜色会扩展到整个页面而不是470px？

Answer 1

实体取这个宽度，居中。它只是一个CSS怪癖，它使背景占据了整个页面，而不是身体元素实际占用的空间。

解决此问题的方法是在background代码中加入html属性。

Here's一个例子。

然而，正如其他人所说，这可能不是你想要做的事情。最好在主体和样式中添加div 。

Answer 2

当<html>元素没有指定背景时，正文背景将覆盖页面。如果html元素具有指定的背景，则正文背景将与任何其他元素一样。

来自W3：

但是，对于HTML文档，我们建议作者指定 BODY元素的背景而不是HTML元素。对于其根元素是HTML＆＃34; HTML＆＃34;元素或XHTML ＆＃34; HTML＆＃34;计算了＆＃39;透明＆＃39;的值的元素对于＆＃39;背景色＆＃39;并且没有＆＃39;对于＆＃39; background-image＆＃39;，用户代理必须而是使用背景属性的计算值元素的第一个HTML＆＃34; BODY＆＃34;元素或XHTML＆＃34; body＆＃34;元素孩子的时候绘画画布背景

基本上你的代码很好，内容以为中心，但你在身体上指定的背景也被应用到<html>。当您为<html>元素提供白色背景时，您可以看到差异：

<强> jsFiddle example

Answer 3

您的CSS正在整个页面上应用这些属性。

也许你在寻找这个：

p { //body changed to p
    margin: 0 auto;
    width: 470px;
    background-color: cyan;
}

Here is the updated JSFiddle

Answer 4

您无法在正文上设置宽度，它由浏览器大小定义。编辑你的html以包含内部内容，它将正常工作。

This:

<body>
    <div id="content">
        <p>Some content</p>
    </div>
</body>

Answer 5

您将for i in friends:视为body元素。这导致文本居中。而是附上你的

<div>内的

<p>Some content</p>，可能会给它<div>

HTML：

class

CSS：

<body>
   <div class="name"
       <p>Some content</p>
   </div>
</body>

如果您不想使用.name{ margin: 0 auto; width: 470px; background-color: cyan; text-align: center; }或class或id，则可以简单地将所有<div>更改为该css

<p>

Answer 6

在浏览器中，<body></body>表示主容器，宽度表示浏览器。如果你想将所有内容放入体内，可以简单地尝试一下：

body {
  margin: 0px auto;
  text-align: center;
  background-color: cyan;
}

<body>
  <p> Content </p>
</body>

我更喜欢将内容添加到<div></div>。

CSS body元素宽度不起作用

6 个答案: