Question

这可能会成为一个微不足道的问题，但我试图将所有div放在一个容器中，但无论我尝试使用自动边距，一切都仍然与页面左侧对齐。

任何人都知道发生了什么事吗？

也把它放在jsfiddle上：

#page-container {   
margin: 0px auto;
}

任何帮助都会很棒。

Answer 1

默认情况下，您#page-container块的宽度为100％，因此margin: 0 auto将无法执行任何操作。

但是，您的块级子元素可以居中，例如：

#main-nav {     
   background: grey;    
   height: 30px;     
   width: 90%;
   margin: 0 auto;
}

您需要将margin: 0 auto应用于您希望在#page-container父块中居中的每个容器。

您可以使用CSS执行此操作，或者将相同的规则应用于需要居中的每个块，或者使用居中规则创建CSS类，然后将类应用于每个块，例如：

#page-container > div {
    margin: 0 auto;
}

请注意，获得类似结果的更简单方法是将#page-container的宽度设置为90％，并让子元素占据父块的整个宽度。

但是，这两种技术都是有效的，选择的技术可能取决于其他设计和布局考虑因素，例如背景图像的使用等。

Answer 2

上面已经回答过这个问题......

但是要将项目居中，它将需要一个宽度，没有一个块元素将包含100％的可用空间。

#page-container { 
width: 70%;  
margin: 0px auto;
}