« 百度啊,我对你真的又哭又笑啊
用ASP编写图片计数器 »

跨浏览器实现float:center



我们都知道float:left和float:right,但是否想过float:center呢?居中浮动。




<div id="macji">    <ul class="macji-skin">        <li>列表一</li>        <li>列表二</li>        <li>列表三</li>    </ul></div>我们希望实现li是浮动的,并且居中的(li个数不固定,ul宽度未知)。


可以设置ul的text-align:center,再设置li的display,可以实现居中,但这样不是我们的初衷,我们需要实现float:center。


这里我们得先重温一下position:relative,它将依据left,right,top,bottom等属性在正常文档流中偏移位置。


那我们可以让ul为position:relative;left:50%,然后再让li像左浮动,在让它position:relative;right:50%(或者left:-50%),那么li就像向中间浮动一样居中了。


废话不多说,先试试。


#macji{    position:relative;    width:100%;    height:80px;    background-color:#eee;    text-align:center;    overflow:hidden;}#macji .macji-skin{    float:left;    position:relative;    left:50%;}#macji .macji-skin li{    position:relative;    right:50%;    float:left;    margin:10px;    padding:0 10px;    border:solid 1px #000;    line-height:60px;}

  相关文章:
发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。