居中導航ul li

我似乎無法讓主導航欄居中對齊li元素。我只有在瀏覽器低於768px時纔會遇到問題。我試過在#nav ul上顯示：inline-block，然後文本對齊無效。這裏是網站： Website 居中導航ul li

，這裏是有問題的CSS：

/* Main Navigation */ 
#topmenu {float: left; height: auto; text-align: center; margin: -10px auto -10px 10px; display: block; width: 96%;} 
#nav {float: left; border-left: none; margin: 10px auto 0px; text-align: center; display: block; width: 100%;} 
#nav li {float: left; margin-right: auto; border-right: none; width: auto;} 
#nav li a:link, #nav li a:active, #nav li a:visited {display: block;text-decoration: none; line-height: 20px; outline: medium none; font-size: 19px; letter-spacing: -0.05em; float: left; padding: 6px 9px 8px; text-align: center; width: auto;} 
span.descmenu {display: none;}

來源

2014-02-05 Frank McClung

應用這些屬性/值

#nav { 
    text-align: center; /*add*/ 
} 
#nav li { 
    display: inline-block; /*add*/ 
    text-align: left; /*add*/ 
    float: none; /*change left to none on max-width: 767px */ 
}

來源

2014-02-05 23:19:36

完美工作。我做的事情太複雜了。 –

的display:inline-block和text-align: center技術並在這裏工作，但你必須確保在較小的屏幕上你的UL（#nav ）沒有浮動，沒有設置寬度。

@media screen and (max-width: 767px) { 
    #nav { 
    float: none; /* Changed from float: left*/ 
    border-left: none; 
    margin: 10px auto 0px; 
    /* text-align: center; NOT NEEDED */ 
    display: inline-block; /* Changed from display: block */ 
    /*width: 100%; Remove */ 
    } 
}

來源

2014-02-05 23:15:38 davidpauljunior

感謝幫助大衛。我確實刪除了那些不必要的行。 –

這將居中子在導航欄

#nav { 
text-align: center; 
}

在看看它看起來像一個漂浮的CSS標題：向左或填充/保證金可能overiding你想要的風格里。

來源

2014-02-05 23:16:43

回答

相關問題