居中并设置自动宽度CSS

Question

我一直试图这样做一段时间，但我似乎无法让我的导航栏居中，我想让它将宽度调整到其中的所有内容。

<nav>
    <ul id="menu" class="black">
        <li><a href="index.html">Home</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

http://jsfiddle.net/e4fa6/

Answer 1

我做了一些改变，把你的利益设定为：

#menu li {
  display: inline-block;
  float: none;
  margin: 0;
}

还将#menu作为：

#menu {
  text-align: center;

}

在这里演示：http://jsfiddle.net/e4fa6/2/

Answer 2

我把你的小提琴分开了：http://jsfiddle.net/dvdNf/

我已将width: 25%;和text-align: center;添加到您的<li>

Answer 3

我会使用display: table;来居中自动宽度元素。

DEMO http://jsfiddle.net/kevinPHPkevin/e4fa6/4/

nav {
    display: table;
    margin: auto;
}