跨瀏覽器實現(xiàn)float:center
互聯(lián)網(wǎng) 發(fā)布時間：2008-10-17 19:26:11 作者：佚名 
我要評論
我要評論原文：
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呢？居中浮動。。。
<div id="macji">
<ul class
原文：
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呢？居中浮動。。。
<div id="macji">
<ul class="macji-skin">
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ul>
</div>
我們希望實現(xiàn)li是浮動的，并且居中的（li個數(shù)不固定，ul寬度未知）。可以設(shè)置ul的text-align:center,再設(shè)置li的display，可以實現(xiàn)居中，但這樣不是我們的初衷，我們需要實現(xiàn)float:center。
這里我們得先重溫一下position:relative，它將依據(jù)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
相關(guān)文章
- positon有4個屬性:static relative absolute fixed，我們都知道absolute是絕對定位，relative是相對定位，但是這個絕對與相對是什么意思呢？絕對是什么地方的絕對，相對又2014-11-28
css中定位中的absolute和relative是什么意思
做一些浮動層等特殊特殊效果時要考慮到定位問題就要用到Position屬性，其有四個屬性值：static、fixed、absolute和relative，想必后面兩個大家都熟悉吧2014-04-15CSS中的position:relative;的作用示例介紹
CSS中的position:relative是控制元素相對定位的，relative 不脫離文檔流而absolute 脫離文檔流，relative 的元素盡管表面上看到它偏離了原來的位置，但它實際上在文檔流中2013-11-05css relative相對定位的top值在不同瀏覽器中使用js獲取的差異
relative是指相對于這個對象原來所在位置（參照）的值，下面為大家將講解下使用js獲取時在IE、chrome、oprea等瀏覽器中的區(qū)別，感興趣的朋友可以參考下2013-10-24css中position:relative和overflow:hidden之間的問題
在父標(biāo)簽中使用了overflow:hidden;時，如果子標(biāo)簽中有元素的position設(shè)置成relative的時候，在IE6和IE7中父元素的overflow對其將不起作用，其實將父標(biāo)簽的position也設(shè)置成2013-09-04css中position屬性(absolute|relative|static|fixed)概述及應(yīng)用
position屬性的相關(guān)定義：static：無特殊定位，對象遵循正常文檔流;relative：對象遵循正常文檔流;absolute：對象脫離正常文檔流fixed：對象脫離正常文檔流，有興趣的朋友2013-04-08CSS position屬性absolute relative等五個值的解釋
目前幾乎所有主流的瀏覽器都支持position屬性（"inherit"除外，"inherit"不支持所有包括IE8和之前版本IE瀏覽器，IE9、IE10還沒測試過），以下是w3school對position五個值的2012-12-15css 使用relative設(shè)置top為百分比值的方法(仿百度首頁)
最近在學(xué)習(xí)HTML、CSS的過程中，想模仿一下百度首頁。發(fā)現(xiàn)搜索框這一部分與上下其它元素的空白距離可以隨著窗口大小變化，下面小編給大家?guī)砹薱ss 使用relative設(shè)置top為百2018-02-27