ul居中在OP和FF中用margin:0 auto;和text-align:center;可以輕松的實現,然而IE中確是居左顯示的,具體的錯誤原因待考證。
下面的方法可以輕松的實現ul居中顯示,注意ul和li都必須定義float,否則無效。
我們都知道float:left和float:right,但是否想過float:center呢?居中浮動。。。
<div id="macji">
<ul class="macji-skin">
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ul>
</div>
我們希望實現li是浮動的,並且居中的(li個數不固定,ul寬度未知)。可以設置ul的text-align:center,再設置li的display,可以實現居中,但這樣不是我們的初衷,我們需要實現float:center。
這裡我們得先重溫一下position:relative,它將依據left,right,top,bottom等屬性在正常文檔流中偏移位置。那我們可以讓ul為position:relative;left:50%,然後再讓li像左浮動,在讓它position:relative;right:50%(或者left:-50%),那麼li就像向中間浮動一樣居中了。廢話不多說,先試試。
#macji{
position:relative;
width:100%;
height:80px;
background-color:#eee;
text-align:center;
overflow:hidden;
}
#macji .macji-skin{
float:left;
position:relative;
left:50%;
}
#macji .macji-skin li{
position:relative;
right:50%;
float:left;
margin:10px;
padding:0 10px;
border:solid 1px #000;
line-height:60px;
}