关于浮动元素li的居中方法

本文介绍了一种利用CSS相对定位实现元素居中的方法。通过将包含浮动元素的父级容器定位为相对,并将浮动元素的位置设为相对并偏移50%,再通过负边距或百分比偏移使其居中。这种方法适用于任何宽度的浮动元素。

  这种办法想当不错,就是用相对定位来实现“float:center;”

 

.demo { 
border: 1px solid #CCC; 
margin: 5px auto; 
overflow: hidden; 
width: 1430px;/* 给包含ul的盒子设置宽度为浏览器窗口的物理宽度,发现li的内容仍然居中,说明无论是是否定宽,相对定位法均可以使float元素居中 */ 
} 
.demo ul { 
float: left; 
position: relative; 
left: 50%; 
} 
.demo ul li { 
border: 1px solid #555; 
float: left; 
position: relative;/* 只能用相对不能用绝对 */ 
padding: 5px; 
left: -50%;/* 或者right: 50%; */ 
list-style: none; 
margin: 10px; 
} 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值