关于CSS宽度的问题：100％

Question

我想创建一个灵活的网格布局（即没有任何像素值在任何地方使用） 现在，这是我的问题; 对于外容器，一般我使用

#container{width:1024px;margin:0 auto} 

这是中心对齐整个页面。现在，当我将其转换为基于％的CSS时，即

#container{width:100%;margin:0 auto} 

在这种情况下，页面没有居中对齐。我如何解决这个问题？

Answer 1

如果我理解正确的问题解决这个问题，你似乎需要的东西，从无限扩大停止容器，但仍然有它当视口狭窄时可灵活扩展。如果是这样的话，你可以申请一个max-width它来告诉它何时停止扩张：

#container { 
    width: 100%; 
    max-width: 1024px; 
    margin: 0 auto; 
} 

在这种情况下，您的容器将是灵活的，并采取了所有可用的宽度，如果视口小于1024像素宽，但如果窗口变大，则不会超过1024像素（并且将居中对齐）。

Answer 2

页面无法集中对齐，因为它使用完整的浏览器宽度。例如： ：“width：80％”，你会看到我在说什么;

Answer 3

是的，你怎么能期待什么东西被中心对齐，当它填满整个宽度。

Answer 4

您的货柜确实中心对齐。 100％的宽度意味着容器占据了父容器的所有宽度（让我们假设屏幕），因此空间的边距为0。 通常，通过将边框应用于容器可以轻松跟踪这些问题。

您可以通过定心元素内您的容器text-align: center;