使用包裝來居中導航ul

我正在使用< nav> < ul> < li>來製作菜單。我希望把它水平和中心整體上行，但看起來，它不工作，UL是不與包裝使用包裝來居中導航ul

<div id="wrap"> 
<nav> 
<ul> 
    <li class="menuitem">Menu</li> 
    <li class="menuitem">Menu</li> 
    <li class="menuitem">Menu</li> 
    <li class="menuitem">Menu</li> 
    <li class="menuitem">Menu</li> 
</ul>

.menuitem { 
background-color: #E3E3E3; 
float: left; 
width: 100px; 
height: 90px; 
list-style-type: none; 
text-align: center; 
color: black; 
display: inline; 
} 

#wrap { 
    margin: 0 auto; 
}

保證金，汽車中心

這裏是fiddle

來源

2014-05-12 clement

'顯示：inline-block的;'您'.menu_nav UL li'。您更新的小提琴：http://jsfiddle.net/abhitalks/84exq/1/ – Abhitalks

你應該給你的.menu-nav一個固定的寬度，例如width: 200px;否則margin: auto不工作。

此外，您的.menuitem類中還有text-align: center;屬性。這將文本居中。刪除，如果你不希望文本在菜單中居中。

欲瞭解CSS更先進的定心方法的詳細信息，請閱讀本blog post about css centering

來源

2014-05-12 07:49:40 frieder

謝謝！文本對齊是爲了將li中的文本居中放置，因爲li上也有一個img，所有居中:-) – clement

使用包裝來居中導航ul

回答

相關問題