原文：

http://www.macji.com/blog/article/to-achieve-cross-browser-css-float-center/to-achieve-cross-browser-css-float-center/

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

我们希望实现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;

}

扩展阅读：

http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

相关文章

positon有4个属性:static relative absolute fixed，我们都知道absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又2014-11-28

做一些浮动层等特殊特殊效果时要考虑到定位问题就要用到Position属性，其有四个属性值：static、fixed、absolute和relative，想必后面两个大家都熟悉吧2014-04-15

CSS中的position:relative是控制元素相对定位的，relative 不脱离文档流而absolute 脱离文档流，relative 的元素尽管表面上看到它偏离了原来的位置，但它实际上在文档流中2013-11-05

relative是指相对于这个对象原来所在位置(参照)的值，下面为大家将讲解下使用js获取时在IE、chrome、oprea等浏览器中的区别，感兴趣的朋友可以参考下2013-10-24

在父标签中使用了overflow:hidden;时，如果子标签中有元素的position设置成relative的时候，在IE6和IE7中父元素的overflow对其将不起作用，其实将父标签的position也设置成2013-09-04

position属性的相关定义：static：无特殊定位，对象遵循正常文档流;relative：对象遵循正常文档流;absolute：对象脱离正常文档流fixed：对象脱离正常文档流，有兴趣的朋友2013-04-08

目前几乎所有主流的浏览器都支持position属性("inherit"除外，"inherit"不支持所有包括IE8和之前版本IE浏览器，IE9、IE10还没测试过)，以下是w3school对position五个值的2012-12-15

最近在学习HTML、CSS的过程中，想模仿一下百度首页。发现搜索框这一部分与上下其它元素的空白距离可以随着窗口大小变化，下面小编给大家带来了css 使用relative设置top为百2018-02-27

最新评论