使用包装来居中导航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

回答

相关问题