css 跨浏览器实现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;
}

赞 (0)

相关推荐

  • 详细分析css float 属性以及position:absolute 的区别

    详细分析css float 属性以及position:absolute 的区别

    1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块级元素,会单独占据一行. 先看看最基本的块级元素如何排列的.html代码,以下样式都是基于此. 复制代码 代码如下: <div class="boxBg">        <div class="box1">        框框1       

  • relative absolute无法冲破的等级问题解决第1/3页

    前段时间记得好像是谁在群里提出了一个实在是让大家都觉得很不理解的一个问题:  复制代码 代码如下: <ul>   <li>第一块</li>   <li><span>第二块</span></li>   <li>第三块</li>   <li>第四块</li>   <li>第五块</li>   </ul> 如果我我们设定LI为position:r

  • position:relative/absolute无法冲破的等级

    注:本文实例在IE5.x下可能会显示不出来,请使用IE6.IE7.Firefox.Opera等浏览器来调试! 前段时间记得好像是谁在群里提出了一个实在是让大家都觉得很不理解的一个问题:  复制代码 代码如下: <ul>   <li>第一块</li>   <li><span>第二块</span></li>   <li>第三块</li>   <li>第四块</li>   <

  • CSS中Float（浮动）相关技巧文章

    Float(浮动)概念也许是CSS中最让人迷惑的一个概念吧.Float经常被错误理解,而且因为将上下文元素全部浮动导致的可读性.可用性问题备受责难.然而,这些问题的根源并不在于理论本身,而是开发人员以及浏览器对理论的解读造成的. 如果你认真的去读一下浮动概念,你会发现并不像所见的那样复杂.大多数问题都是由于老版本的IE带来的(我只是猜想).如果你知道这些bug,你就能避免这些问题. 让我们尝试去解决这些问题并澄清一些以前使用浮动的误解.我们参考了成打的相关文章,并选取了最为重要的一些你必须了解的

  • javascript css styleFloat和cssFloat

    下面是兼容性代码 复制代码 代码如下: LTFunction.setFloatStyle=function(obj,style) { var sty=obj.style; if('cssFloat' in sty){ obj.style.cssFloat=style; }else if('styleFloat' in sty){ obj.style.styleFloat=style; }else{ throw 'set float style:'+style+'error.'; } }

  • 解决rs.absolutepage=-1的问题

    有时候在做asp的分页程序的时候会遇到无法分页的情况,就试着把rs.absolutepage打印出来结果却一直为-1. 下面介绍一种解决方案: .......省略 rs.cursorlocation=3 '就是加上这行 rs.open sql,conn,3,2 rs.pagesize=10 if not rs.eof then rs.absolutepage=1 end if pagecount=rs.pagesize .........省略

  • javascript下操作css的float属性的特殊写法

    使用js操作css属性的写法是有一定的规律的: 1.对于没有中划线的css属性一般直接使用style.属性名即可.  如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position等. 2.对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可.  如:obj.style.marginTop,obj.style.borderLeftWidth,obj.style.zIndex,obj.styl

  • javascript css float属性的特殊写法

    1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position等. 2.对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可. 如:obj.style.marginTop,obj.style.borderLeftWidth,obj.style.zIndex,obj.style.fontFamily等. 这个规律我想大多数的前

  • css position: absolute、relative详解

    CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠.此时对象不具有外补丁( margin ),但仍有内补丁( padding )和边框( border ). 要激活对象的绝对(absolute)定位,必须指定 left , right , top , bottom 属性中的至少一个,并且设置此属性值为 ab

  • CSS定位中Positoin、absolute、Relative的一些研究

    Positoin属性有四个值: static.fixed.absolute和relative,后面两个在布局中的定位里是经常用到的,顾名思义,absolute是指绝对定位,即将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位,而其层叠通过z-index属性定义.此时对象不具有边距,但仍有补白和边框.ralative是指相对定位,就是依据left,right,top,bottom等属性在正常文档流中偏移位置. 但是,怎么个绝对法,又怎么个相对法呢?以前我一直没有

  • Div CSS absolute与relative的区别小结

    详细讲解两者的关系,需要配合例子,请先看例子: 以下是引用片段: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>

随机推荐