跨浏览器实现float:center

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

一直想实现一种类似float:left/right的居中效果，但想了好久，也问了好多大侠，一直没解决，今天在蓝色看见了，大喜！

<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;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="zh-cn" lang="zh-cn" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta content="麦鸡(MacJi)的博客，关注Web内容、结构与表现。" name="description" /> <meta content="Copyright (c) 2008 MacJi" name="copyright" /> <meta content="麦鸡,MacJi" name="author" /> <meta content="web前端开发,麦鸡,MacJi,Blog,博客" name="keywords" /> <title>跨浏览器实现float:center，No CSS hacks</title> <style> ul,li{ margin:0; padding:0; list-style:none; } #macji{ 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{ float:left; margin:10px; padding:0 10px; position:relative; right:50%; line-height:60px; border:solid 1px #000; } </style> </head> <body> <h1>跨浏览器实现float:center，No CSS hacks</h1> <div id="macji"> <ul class="macji-skin"> <li>列表一,我是浮动的</li> <li>列表二</li> <li>列表三</li> <li>这里可能是N</li> </ul> </div> </body> </html>

提示：您可以先修改部分代码再运行