跨瀏覽器實現(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寬度未知)??梢栽O置ul的text-align:center,再設置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
相關文章
- 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之間的問題
在父標簽中使用了overflow:hidden;時,如果子標簽中有元素的position設置成relative的時候,在IE6和IE7中父元素的overflow對其將不起作用,其實將父標簽的position也設置成2013-09-04css中position屬性(absolute|relative|static|fixed)概述及應用
position屬性的相關定義:static:無特殊定位,對象遵循正常文檔流;relative:對象遵循正常文檔流;absolute:對象脫離正常文檔流fixed:對象脫離正常文檔流,有興趣的朋友2013-04-08CSS position屬性absolute relative等五個值的解釋
目前幾乎所有主流的瀏覽器都支持position屬性("inherit"除外,"inherit"不支持所有包括IE8和之前版本IE瀏覽器,IE9、IE10還沒測試過),以下是w3school對position五個值的2012-12-15css 使用relative設置top為百分比值的方法(仿百度首頁)
最近在學習HTML、CSS的過程中,想模仿一下百度首頁。發(fā)現(xiàn)搜索框這一部分與上下其它元素的空白距離可以隨著窗口大小變化,下面小編給大家?guī)砹薱ss 使用relative設置top為百2018-02-27