關於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;