position: absolute;絕對定位水平居中問題

用CSS讓元素居中顯示並非件很簡單的事情—一樣的合法CSS居中設置在不一樣瀏覽器中的表現行爲卻各有千秋。讓咱們先來看一下CSS中常見的幾種讓元素水平居中顯示的方法。web

 

1.使用自動外邊距實現居中瀏覽器

CSS中首選的讓元素水平居中的方法就是使用margin屬性—將元素的margin-left和margin-right屬性設置爲auto便可。在實 際使用中,咱們能夠爲這些須要居中的元素建立一個起容器做用的div。須要特別注意的一點就是,必須爲該容器指定寬度:佈局

複製內容到剪貼板url

代碼:spa

 

div#container {設計

margin-left: auto;orm

margin-right: auto;ci

width: 980px;get

}it

在大多數主流瀏覽器中,這種方法都很是有效,即便是Windows平臺上的IE6,在其標準兼容模式(compliance mode)下也可以正常顯示。但不幸的是,在更低版本的IE中,這種設置卻並不能實現居中效果。因此若想在實際項目中使用這種方法,那麼就要確保用戶的 IE瀏覽器版本不低於6.0。

 

儘管在支持上不盡如人意,但大多數設計師都建議儘量地使用這種方法。該方法也被認爲是在各類用CSS實現元素水平居中方法中最正確、最合理的一種。

 

2.使用text-align實現居中

另外一種實現元素居中的方法是使用text-align屬性,將該屬性值設置爲center並應用到body元素上便可。這種作法是徹頭徹尾的hack,但它卻能兼容大多數瀏覽器,因此在某些狀況下也天然必不可少。

 

之因此說它是hack,是由於這種方法並無將文本屬性應用到文本上,而是應用到了做爲容器的元素上。這也給咱們帶來了額外的工做。在建立好佈局必須的div以後,咱們要按照以下代碼爲body應用text-align屬性:

複製內容到剪貼板

代碼:

 

body{

text-align:center;

}

以後會出現什麼問題嗎?body的全部子孫元素都會被居中顯示。

所以,咱們就須要用再寫一條規則,讓其中的文本回到默認的居左對齊:

複製內容到剪貼板

代碼:

 

p {

text-align:left;

}

能夠想象這條附加的規則將帶來一些不便。另外,真正徹底遵循標準的瀏覽器並不會改變容器的位置,而只會讓其中的文字居中顯示。

 

3.組合使用自動外邊距和文本對齊

由於文本對齊居中方式有着良好的向下兼容性,且自動外邊距方式也被大多數當代瀏覽器支持,因此不少設計師將兩者組合起來使用,以期讓居中效果獲得最大限度的跨瀏覽器支持:

複製內容到剪貼板

代碼:

 

body {

text-align: center;

}

 

#container {

margin-left: auto;

margin-right: auto;

border: 1px solid red;

width: 980px;

text-align: left

}

但是這始終是個hack,不管如何也算不上完美。咱們仍是須要爲居中容器中的文本編寫附加的規則,但至少在各個瀏覽器中看起來都不錯。

 

4.負外邊距解決方案

負外邊距解決方案遠不是僅僅爲元素添加負外邊距這麼簡單。這種方法須要同時使用絕對定位和負外邊距兩種技巧。

 

下面是該方案的具體實現方法。首先,建立一個包含居中元素的容器,而後將其絕對定位於相對頁面左邊邊緣50%的位置。這樣,該容器的左外邊距將從頁面50%寬度的位置開始算起。

 

而後,將容器的左外邊距值設置爲負的容器寬度的一半。這樣便可將該容器固定在頁面水平方向的中點。

複製內容到剪貼板

代碼:

 

#container {

background: #ffc url(mid.jpg) repeat-y center;

position: absolute;

left: 50%;

width: 980px;

margin-left: -490px;

}

看,沒有任何hack!雖然這並非首選的解決方案,但也是個不錯的方法,且適用性極廣—甚至在Netscape Navigator 4.x中都沒有任何問題,很使人吃驚,不是嗎?因此若想獲得最普遍的瀏覽器支持,那麼這種方法將會是最好的選擇

 

轉自:http://hi.baidu.com/huhai586/item/a9ff91ca7ef1afd59744524a

相關文章
相關標籤/搜索