使用CSS的中心

Question

我有一個菜單，我想用CSS將它居中。

當前代碼：

.menu { 
    margin:10px 0 10px 20px; 
    float:right; 
} 
.menu li { 
    padding:0 20px 0 20px; 
    border-left:1px solid #FFF; 
    border-right:1px solid #DDD; 
    float:left; 
} 
.menu li.first { 
    border-left:none; 
} 

我會添加/修改/刪除，使菜單顯示中心，不左/右？謝謝！

Answer 1

一個做到這一點的最簡單的方法是將左邊和右邊距設置爲auto，並給該元素一個固定的寬度：

.menu { 
    width: 500px; // or whatever 
    margin-left: auto; 
    margin-right: auto; 
} 

的W3C recommends，如果你希望你的.menu元素密切適應周圍的內容，你可能要使用絕對定位和50倍％的利潤，而不是像這樣：

.menu { 
    left: 50%; 
    margin-right: -50%; 
    transform: translate(-50%, -50%); 
} 

你可以看到這是如何工作的W3C網頁上。但是，第一種方法更常見（並且可讀）。