一聚教程网:一个值得你收藏的教程网站

热门教程

css浮动元素的居中的例子

时间:2022-06-25 10:04:18 编辑:袖梨 来源:一聚教程网


关于浮动元素的居中,其实不太常用,但为了应付某些奇葩的面试官,也要知道怎么解决这个问题。

贴出一段css代码:

width:50%; float:left; margin-left:50%;  position:relative; left:-25%;background-color:#ccc;

要害在于,给一个左边距,然后定位,让left值为div宽度的一半,即可实现。

其实这种方法也是做弹窗,让它位于浏览器中间位置常用的方法:给个左(上)边距,在position个left(top)值。

例子



 



p1


p2


p3


p4




 

我们发现也能够实现居中效果,但是其可扩展性较差,如果删除一个p或者添加一个p,则需要对.divs div这个样式里的width进行修改

热门栏目