html - 中心的导航菜单

Question

我希望我的导航菜单位于中心我尝试了另一个类似问题中发布的方法但对我不起作用..这里是fiddle

这是代码 HTML:

<div id="nav">

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Example</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

</div>

CSS:

    #nav {
    background:#111212;
    width: 100%;
    height:55px;
    float: left;
    margin:0 auto;
    padding:0;
    font-size:125%;
}
#nav ul{
    list-style: none;
    width: 80%;
    margin: 0 auto;
    padding:0;
}

#nav li {
    float:left;
}

#nav li a {
    display:inline-block;
    padding:17.5px 15px 17.5px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #438181; 
}

#nav li a:hover {
    color:#438181;
    background-color:#fff; 
}

Answer 1

一种方法是将列表项更改为 inline-block而不是 float 它们，然后应用 text-align以 block 容器为中心，<ul> - 例如

#nav ul{
    list-style: none;
    width: 80%;
    margin: 0 auto;
    padding:0;
    text-align: center;
}

#nav li {
    display: inline-block;
}

http://jsfiddle.net/suZR3/11/