如何用float配合position:relative实现居中

今天发现自己做的一个项目中有个图片切换的下面的按钮不是固定个数，程序那边根据循环实现放几个切换的按钮，但是按钮相对于整体的要居中，刚 开始 想着用dis play :inline-block;实现，但是ie6和ie7对块元素使用这个属性不是特 理想 ，只能用hack解决，于是去请教同事，发现还有一种更好的解决办法。

ht ML 代码如下：

复制代码

代码如下:

<div class="favViewicon ">
<ul class="clearfix">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

关于pos IT ion: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; m arg in:15px auto 0; h ei ght:10px;}
.favViewicon ul{ position:relative; float:left; left:50%; text-align:center;}
.favViewicon li{ width:10px; height:10px; background:url( BT n sprite s.png) no-re PE at 0 -164px; mar gin :0 3px; cursor:pointer; text -i ndent:-99999px; position:relative;right:50%;float:left; display:inline; }

@H_ 360 _42@

总结

以上是 为你收集整理的 如何用float配合position:relative实现居中 全部内容，希望文章能够帮你解决 如何用float配合position:relative实现居中 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于如何用float配合position:relative实现居中的详细内容...