使用float:center实现跨浏览器居中

作者：macji 来源：麦鸡的博客

我们都知道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;
}

<!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>

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

教程导航

HTML/CSS热门教程

css技巧的一些总结

使用 line-height 垂直居中 line-height:24px; 使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致），更多的垂直居中总结...

作者：grace

如何正确的使用 id 和 class

今天有点闲，想向大家请教一下id和class的使用。按照字面的意思，id是指一个元素在整个文档中的唯一标志，而class则是它所属的类别。按照语法，同名的id在一个...

作者：wheatlee

纯CSS制作滑动相册浏览

这是一个很简单的纯CSS相册滑动浏览效果，仅用一个无序列表ul结合简单的CSS就可以实现。原文中介绍的纵向滑动相册的实现方法，但是相比之下个人更喜欢横向滑动的...

作者：ximicc

浅议 Web 表单设计

输入框（ Input ）应当符合逻辑地划分为小组，这样大脑就可以很好的处理大堆区域间的关系。《HTML权威指南》 Web 应用程序总是利用表单来处理数据录入和配置，...

作者：Farewelli

Web标准化制作：利用CSS按比例缩小

当然，生成缩略图这个工作如果交给程序来完成,效果会好很多，但是有时出于某种因素，例如服务器不支持GD之类的，难免就要请CSS代劳。把一副大图片按比例缩小到...

作者：mixfog