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;

水平居中CSS菜单

1 个答案: