css - 水平居中 CSS 菜单

Question

浏览了很多关于如何水平居中菜单的文章，我似乎无法杀死野兽。是否有人可以帮助编写代码:

我可能已经完全弄乱了我所有的尝试让它对齐。 :-)

谢谢!

HTML

<div id="container">
<div id="masthead"> </div>
<div id="top-nav" >     
        <ul class="nav">
            <li><a href="#"> Europe </a></li>
            <li><a href="#"> N. America </a></li>
            <li><a href="#"> S. America </a></li>
            <li><a href="#"> Asia </a></li>
            <li><a href="#"> Africa </a></li>
            <li><a href="#"> Australia </a></li>
            <li><a href="#"> Misc </a></li></ul>
            </div>

CSS

}
#top-nav {
height: 50px;
background : transparent;
height : 77px;
list-style : none;
margin-top : 7px;
margin-bottom : 11px;
background-repeat: no-repeat;
}
ul.nav {
border-radius: 15px;
background : transparent;
height : 57px;
line-height : 31px;
list-style : none;
padding : 0 10px;
font-size : 14px;
font-weight: bolder;
}
ul.nav li {
display : inline;
padding : 0;
background : transparent;
}
ul.nav a {
font: 100%;
background: transparent;
height : 30px;
font-size : 12px;
color: #000000;
float : left;
padding : 11px 19px 11px 16px;
text-decoration : none;
border-top: 1px solid #252525;
border-bottom : 4px solid #252525;
border-left : 1px solid transparent;
border-right : 1px solid transparent;
border-radius : 4px;
-moz-border-radius : 4px;
-webkit-border-radius: 4px;
}
ul.nav a:hover {
background : #252525;
border-top : 1px solid #252525;
border-bottom : 4px solid #000;
border-left : 1px solid #252525;
border-right : 1px solid #252525;
color : #FFF;
padding : 11px 19px 11px 16px;
border-radius : 4px;
-moz-border-radius : 4px;
-webkit-border-radius: 4px;
}

Answer 1

这就是你想要的？ <强> Fiddle

只需将此 CSS 规则添加到 #top-nav 元素:

text-align: center;

这是 ul.nav 元素:

display: inline-block;