html - 导航栏不会去中心

Question

无论我做什么，我都无法让导航居中。

我有一个包装器，导航栏在这个 div 上有一条下划线。按钮的顶部是圆形的，因此看起来就像是从底部边框出来的。

我尝试寻找一种使它们居中的好方法。很多人使用 margin auto 或 margin 0 auto。其他人也将它与 display inline-block 结合使用，但随后导航按钮的边框被切断。

这是我的 HTML:

<div id="nav">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about me.html">About me</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="cv.html">CV</a></li>
        <li><a href="contact.php">Contact</a></li>
    </ul>
</div>

CSS:

#nav {
    margin: auto;
    color: #FFFFFF;
    width: 100%;
    border-bottom: 1px solid #000000;
}

#nav ul {
    margin: auto;
    padding-top: 6px;
    padding-bottom: 8px;
    padding-left: 5px;
    list-style:none;
}

#nav li {
    display: inline;
    width: 120px;
    margin:0;
    padding: 10px 5px;
    border-radius: 10px 10px 0px 0px / 10px 10px 0px 0px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(100,100,100)),              to(rgb(132,132,132)));
    background : -moz-linear-gradient(top, rgb(200,200,200), rgb(232,232,232));
}

#nav li:last-child {
    border-right: none;
}

#nav a {
    text-decoration: none;
    color: #383838;
    font-weight: bold;
    font-size: 20px;
    padding-right: 10px;
    padding-left: 5px;
}

为了方便你，我也把它放在了一个 js fiddle 中 http://jsfiddle.net/ge702rna/

真的希望有人能帮助我，因为我的手现在被头发束缚住了。

可能我只是做了一些简单的错误。

Answer 1

只需添加text-align:center;

#nav {
    color: #FFFFFF;
    width: 100%;
    border-bottom: 1px solid #000000;
    text-align:center; /* <-- ADD THIS LINE */
}