如何用float配合position:relative實現居中

2024-07-11 08:28:27

字體：大中小

來源：轉載

供稿：網友

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

html代碼如下：

復制代碼

代碼如下:
<div class="favViewicon ">
<ul class="clearfix">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

關于position:relative，它將依據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; }

上一篇：css的margin縮寫方式有效提高書寫效率

下一篇：css按鈕自適應實現原理及代碼