css - 使用 CSS 将我的导航栏居中

Question

几天以来，我一直在为我的网站设计导航栏。但我想把它居中。这是我的 CSS

.nav{
    float:right;width:980px
}
.nav ul {
    width: 980px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    font-size: 1.5em;
    font-weight: 300;
}
.nav li {
    float: right;
    width: 87px;
    text-align: center;
    -webkit-transition: border .5s;
    -moz-transition: border .5s;
    -o-transition: border .5s;
    -ms-transition: border .5s;
    transition: border .5s;
}
.nav a {
    display: block;
    width:87px;height: 74px;
}
.no-touch .nav a:hover ,
.nav a:active ,
.nav a:focus {
    height: 84px;
}   
.nav li span {
    display: block;
    font-family:"Droid Arabic Kufi";

Answer 1

导航上的 float 是不必要的，.nav 上的 with 会阻止 .nav ul 居中。

.nav {
   float: right; // Remove this.
   width: 100%; // Change this.
}

http://jsfiddle.net/7TBHn/2/

虽然在我的 jsfiddle 中我使用 nav 元素是为了更加语义化，但除此之外它没有任何区别。