今天發(fā)現(xiàn)自己做的一個(gè)項(xiàng)目中有個(gè)圖片切換的下面的按鈕不是固定個(gè)數(shù)，程序那邊根據(jù)循環(huán)實(shí)現(xiàn)放幾個(gè)切換的按鈕，但是按鈕相對于整體的要居中，剛開始想著用display:inline-block;實(shí)現(xiàn)，但是ie6和ie7對塊元素使用這個(gè)屬性不是特理想，只能用hack解決，于是去請教同事，發(fā)現(xiàn)還有一種更好的解決辦法。

html代碼如下：

<div class=”favViewicon “>
<ul class=”clearfix”>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

關(guān)于position:relative，它將依據(jù)left，right，top，bottom等屬性在正常文檔流中偏移位置。那我們可以讓ul為position:relative;left:50%，然后再讓li像左浮動，在讓它position:relative;right:50%（或者left:-50%），那么li就像向中間浮動一樣居中了。

.favViewicon{ text-align:center; position:relative; overflow:hidden; margin:15px auto 0; height:10px;}
.favViewicon ul{ position:relative; float:left; left:50%; text-align:center;}
.favViewicon li{ width:10px; height:10px; background:url(btnsprites.png) no-repeat 0 -164px; margin:0 3px; cursor:pointer; text-indent:-99999px; position:relative;right:50%;float:left; display:inline; }