如何使水平導航菜單中心對齊

Question

我正在基於“二十一”主題創建一個Wordpress主題，並且無法弄清楚如何自動使導航欄居中，因此我不必不斷對其進行更新。

這是我的CSS： http : //pastebin.com/SGvKmXEb

這是PHP / HTML： http : //pastebin.com/TBL1nzjV

CSS中可能有重復的屬性，但這僅是因為我仍在對此進行試驗並測試多件事...

先謝謝您的幫助！

Answer 1

我會選擇內聯塊方法。

.containerElement {
    width: 100%;
    text-align: center;
}

.childElements {
    display: inline-block;
}

為了使其在您的代碼中起作用，您需要刪除.containerElement （#access ul）固定高度和.childElements （#access li）浮動屬性。

Answer 2

在您提供的測試網站上，這對我有用

#access li {

float: left; /*delete*/
display:block; /*delete*/

display:inline-block; /*add*/

}

#access ul {

margin-left: 25%; /*delete*/
margin-right: 25%; /*delete*/
width: 1000px; /*delete*/
height: 10px; /*delete*/

margin-bottom: 0px; /*add*/
margin-left: 0px; /*add*/
padding: 0px; /*add*/

}