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

当前位置 : 首页 > 网页制作 > CSS > 如何用float配合position:relative实现居中

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

来源: 作者: 时间:2015-11-05 11:49
想着用display:inline-block;实现,但是ie6和ie7对块元素使用这个属性不是特理想,只能用hack解决,经请教发现个号东西使用float也可以解决,具体如下,感兴趣的朋友可以参考下
想着用display:inline-block;实现,但是ie6和ie7对块元素使用这个属性不是特理想,只能用hack解决,经请教发现个号东西使用float也可以解决,具体如下,感兴趣的朋友可以参考下
今天发现自己做的一个项目中有个图片切换的下面的按钮不是固定个数,程序那边根据循环实现放几个切换的按钮,但是按钮相对于整体的要居中,刚开始想着用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; }
Tag:
网友评论

<