[英]Center ul in div vertically and horizontally
有人可以根據下面的代碼幫助我將“div”中的“ul”垂直和水平居中嗎?
非常感謝!
<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;
}
使用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;
}
正確的做法是:
你把樣式放在ul {display:table; margin:0 auto;}
ul {display:table; margin:0 auto;}
就這些;)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.