热搜：编程 Python Microsoft 编程语言 C++

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

发布时间：2023-02-27 15:57:08 来源：互联网

.

一天，当你走过蔓草荒烟，我便在那里向你轻声呼喊，以风声，以水响。斩断自己的退路，才能更好地赢得出路。

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

html代码如下：

复制代码

代码如下:

关于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; }

到此这篇关于如何用float配合position:relative如何实现居中就介绍到这了。健康没有捷径，来自点滴习惯的养成；养生只能自学，随时保持学习的状态。更多相关如何用float配合position:relative如何实现居中内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

以下您可能有感兴趣的文章:

标签： 用