导航栏不会去中心答案

【问题标题】：the nav bar won't go to the center导航栏不会去中心
【发布时间】：2015-03-13 21:47:05
【问题描述】：

无论我做什么，我都无法导航到中心。

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

我已经尝试寻找一种使它们居中的好方法。很多人使用margin auto或margin 0 auto。其他人也将其与显示内联块结合使用，但随后边框从导航按钮中被切断。

这是我的 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/

真的希望有人能帮帮我，因为我现在双手被绑在头发上。

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

【问题讨论】：

标签： html css

【解决方案1】：

只需添加 text-align:center;

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

【讨论】：

非常感谢。我知道这很简单。我会尽可能接受答案（11 分钟）
有趣的注意事项：因为#nav li被设置为display: inline;，你可以将li元素与text-align: center;居中。

【解决方案2】：

我只是把width改成

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

你在找这个吗..DEMO

【讨论】：