CSS邊距：自動不等於

Question

我試圖讓菜單欄居中。我的代碼是：

.menu 
{ 
    display: block; 
    margin-right: auto; 
    margin-left: auto; 
    position:relative; 
    top: -25px; 
    height: 40px; 
    width: 900px; 
    background-color: #BFBFBF; 
    text-align: center; 
} 

右側&左側不相等。我完全喪失了爲什麼菜單在左側比在右側更多的空間。您可以在此處看到此頁面：http://www.ruthbavetta.com/sample

Answer 1

這是因爲元素.menu的寬度比容器內容框大。 容器.content周圍填充了10px，寬度爲895px。

.content { 
    width: 895px; 
    padding: 10px; 
} 

雖然.menu具有900px的寬度。

.menu { 
    width: 900px; 
} 

如果你想讓它居中，你需要減小菜單的寬度。或者使用寬度爲100%來填充容器元素的整個空間。