跨瀏覽器實現float:center

互聯網 ? 發布時間：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呢？居中浮動。。。

原文：

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

最新評論

總結

以上是生活随笔為你收集整理的html div float center,跨浏览器实现float:center的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。