如何用float配合position:relative实现居中
导读：收集整理的这篇文章主要介绍了如何用float配合position:relative实现居中，觉得挺不错的，现在分享给大家，也给大家做个参考。 今天发现自己做的一个项目中有个图片切换的下面的按钮不是固定个数，程序那边根据循环实现放几...
收集整理的这篇文章主要介绍了如何用float配合position:relative实现居中，觉得挺不错的，现在分享给大家，也给大家做个参考。 今天发现自己做的一个项目中有个图片切换的下面的按钮不是固定个数，程序那边根据循环实现放几个切换的按钮，但是按钮相对于整体的要居中，刚开始想着用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; }
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 如何用float配合position:relative实现居中
本文地址： https://pptw.com/jishu/584882.html