Html 应用'；保证金：0px自动'；到主体元素不'；行不通

根据，放置<代码>显示：块；浮动：无；位置：相对位置应确保元素水平居中的

边距：0px auto

技巧有效。这是我的代码，用于尝试将

正文

置于

html

元素的中心：

body {
    background-color: lightgray;
    float: left;
    font-family: 'Lato', 'Roboto', 'Arial', 'Verdana', sans-serif;

    margin: 0px auto;
    /* Adding these last 3 doesn't seem to make a difference */
    display: block;
    float: none;
    position: relative;
}

当我手动指定像素时，比如

0px 500px

，效果很好。有人知道为什么

auto

在这种情况下似乎不起作用吗

---

编辑：伙计们，即使我指定了主体的宽度，它也不起作用

你必须提到宽度才能使它居中

<style>
    body {
        margin: auto;
        width:50%;
    }
</style>

身体{
保证金：自动；
宽度：50%；
}

---

对于0（零）值，也无需提及px。

您在回答中遗漏了第4点，您提到：

元素的宽度必须不是自动的

注释中对此进行了解释：

从技术上讲，页边距：0自动与自动宽度一起工作，但自动宽度优先于自动页边距，因此自动页边距被调零，使其看起来好像“不工作”

因此，给你的

身体添加一个宽度，你就会看到它起作用了。啊，但这里有一个陷阱：您将它应用于主体，而不是页面上的任何元素。它可以工作，但除非您使
html
的颜色与
正文
不同，否则您将看不到效果。试试这个：

html {
  background-color: red;
}

body {
  background-color: lightgray;
  float: left;
  font-family: 'Lato', 'Roboto', 'Arial', 'Verdana', sans-serif;
  margin: 0 auto;
  display: block;
  float: none;
  position: relative;
  width: 70%;
}

你需要移除浮体，离开你的身体元素，你的容器完全位于中间。
此外，不需要将单位类型（px）的属性设置为零值

考虑：

  body {
        background-color: lightgray;
        background-image: url('../images/brushed.png');
        background-repeat: repeat;
        font-family: 'Lato', 'Roboto', 'Arial', 'Verdana', sans-serif;
        margin:0;
    }

    div#container {
        background-color: #aaaaaa;
        color: white;
        width: 960px;
        margin: 0 auto;
    }

我只是删除了
float:left从主体开始，它居中+

大部分时间->
边距：0px自动将与
显示：表格一起正常工作



我最喜欢的电影
身体{
背景颜色：浅灰色；
背景图像：url（'../images/brushed.png'）；
背景重复：重复；
//float:left；//已删除
字体系列：“Lato”，“Roboto”，“Arial”，“Verdana”，无衬线；
保证金：0px自动；
宽度：960px；
}
分区透明浮球{
明确：两者皆有；
}
div.home-page-images{
浮动：左；
保证金：0px 0px 0px 25px；
}
分区#集装箱{
背景色：#AAAAA；
颜色：白色；
宽度：960px；
}
div#页脚{
背景颜色：灰色；
边缘顶部：50px；
填充：5px0px；
文本对齐：居中；
}
div#头{
填充：50px 0px；
}
导航{
字体系列：“Playfair显示”，衬线；
浮动：左；
文本转换：大写；
宽度：200px；
}
导航a:悬停，导航a:激活{
}
导航a组：链接，导航a组：已访问{
颜色：白色；
文字装饰：无；
}
李国荣分区{
保证金：0px 0px 20px 0px；
}
海军航空分队{
列表样式类型：无；
溢出：隐藏；
}
h1{
文本对齐：居中；
}
h1.home-page-header{
颜色：#bf0000；
字体大小：60px；
}
img.home-page-image-row1{
浮动：左；
宽度：300px；
高度：175px；
左边距：50像素；
边缘顶部：50px；
}
img.home-page-image-row2{
浮动：左；
宽度：250px；
高度：150像素；
左边距：50像素；
边缘顶部：50px；
}
我最喜欢的电影








我最喜欢的电影
作者：詹姆斯·高
版权及副本；2017年詹姆斯·高。版权所有

请根据您的要求更改宽度%。我尝试了
宽度：960px。不幸的是，仍然不起作用。请给出%。示例80%Html默认宽度为100%。嗨，詹姆斯，请删除float:left。然后尝试将
主体
或特定的
div
居中会很好？如果你能帮忙，那就更容易了！！：）嗨，詹姆斯，请取下浮子：左边。那么，这将是这个答案的作者。您不需要明确指定这些内容。您只需要去掉float:left声明，就像其他人告诉您的那样。你问题中的代码和你小提琴中的代码不匹配。你确定你找到了合适的小提琴手吗？我感谢你的努力；我已经指定了宽度，但它仍然不起作用。你能看看我在“编辑我的问题”中发布的JSFIDLE吗？它确实有效，但CSS中还有其他问题。这是一本书。我用上面我的答案中的一个替换了你所有的CSS，所以你可以看到它在工作。当您将宽度设置为
960px
时，您的显示器必须非常大，才能在小提琴结果中看到它（不到屏幕的一半）。您需要更改
主体
和
#容器
上的宽度，您将开始看到右侧的红色边距。然后您必须解决其他问题（例如，删除
float:left；
的行）。下面是一个例子。您不需要对html元素使用不同的颜色。只要调整内容页边距（假设您的显示足够宽），效果就会很明显。@BoltClock如果您将代码从我的答案复制到空白HTML页面（仅
），您将看到红色页边距。注释掉
html
的CSS行，您将看到灰色。当我发布我的答案时，OP没有小提琴，只有CSS