根据下面的代码,有人可以帮助我将“ul”在“div”中垂直和水平居中吗?
非常感谢!
<div id="nav">
<ul>
<li><a class="top" href="#top"><span></span></a></li>
<li><a class="bottom" href="#bottom"><span></span></a></li>
<li><a>Link 1</a></li>
<li><a>Link 2</a></li>
</ul>
</div>
CSS
#nav {
height:35px;
border-bottom:1px solid #ddd;
position:fixed;
top:0px;
left:0px;
right:0px;
background:#fff url(../images/navigation/nav.png) repeat-x center left;
z-index:999999;
}
#nav ul {
list-style:none;
margin:auto;
float:left;
padding:0;
display: block;
}
#nav ul li {
display:inline;
float:left;
margin:0px 2px;
}
#nav a {
font-size:13px;
font-weight:bold;
float:left;
padding: 2px 4px;
color:#999;
text-decoration: none;
border:1px solid #ccc;
cursor: pointer;
background:transparent url(../images/navigation/overlay.png) repeat-x center left;
height:16px;
line-height:16px;
}
#nav a:hover {
background:#D9D9DA none;
color: #fff;
}
#nav a.top span, #nav a.bottom span {
float:left;
width:16px;
height:16px;
}
#nav a.top span {
background:transparent url(../images/navigation/top.png) no-repeat center center;
}
#nav a.bottom span {
background:transparent url(../images/navigation/bottom.png) no-repeat center center;
}
答案 0 :(得分:10)
将display: inline-block
与text-align: center
结合使用。这很好,因为如果您添加或删除链接,它将继续有效。
请参阅: http://jsfiddle.net/thirtydot/VCZgW/
我做出的重大改变:
#nav {
/*height:35px;*/
padding: 6px 0;
}
#nav ul {
/*float:left;*/
text-align: center;
}
#nav ul li {
/*float:left;*/
vertical-align: top;
display: inline-block;
}
答案 1 :(得分:2)
答案 2 :(得分:0)
正确的做法是:
您将样式放在ul {display:table; margin:0 auto;}
这就是全部;)