DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> DIV CSS居中常見方法解析
DIV CSS居中常見方法解析
編輯:CSS詳解     

你對DIV CSS居中的方法是否了解,這裡和大家分享一下,用CSS讓元素居中顯示並不是件很簡單的事情,讓我們先來看一下CSS中常見的幾種讓元素水平居中顯示的方法。

DIV CSS居中

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

1.使用自動外邊距實現DIV CSS居中

CSS中首選的讓元素水平居中的方法就是使用margin屬性—將元素的margin-left和margin-right屬性設置為auto即可。在實際使用中,我們可以為這些需要居中的元素創建一個起容器作用的div。需要特別注意的一點就是,必須為該容器指定寬度:

  1. div#container{
  2. margin-left:auto;
  3. margin-right:auto;
  4. width:168px;
  5. }

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

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

2.使用text-align實現DIV CSS居中

另一種實現元素居中的方法是使用text-align屬性,將該屬性值設置為center並應用到body元素上即可。這種做法是徹頭徹尾的hack,但它卻能兼容大多數浏覽器,所以在某些情況下也自然必不可少。

之所以說它是hack,是因為這種方法並沒有將文本屬性應用到文本上,而是應用到了作為容器的元素上。這也給我們帶來了額外的工作。在創建好布局必須的div之後,我們要按照如下代碼為body應用text-align屬性:

  1. body{
  2. text-align:center;
  3. }

之後會出現什麼問題嗎?body的所有子孫元素都會被居中顯示。

因此,我們就需要用再寫一條規則,讓其中的文本回到默認的居左對齊:

  1. p{
  2. text-align:left;
  3. }

可以想象這條附加的規則將帶來一些不便。另外,真正完全遵循標准的浏覽器並不會改變容器的位置,而只會讓其中的文字居中顯示。

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

因為文本對齊DIV CSS居中方式有著良好的向下兼容性,且自動外邊距方式也被大多數當代浏覽器支持,所以很多設計師將二者組合起來使用,以期讓居中效果得到最大限度的跨浏覽器支持:

  1. body{
  2. text-align:center;
  3. }
  4. #container{
  5. margin-left:auto;
  6. margin-right:auto;
  7. border:1pxsolidred;
  8. width:168px;
  9. text-align:left
  10. }

可是這始終是個hack,無論如何也算不上完美。我們還是需要為居中容器中的文本編寫附加的規則,但至少在各個浏覽器中看起來都不錯。

4.負外邊距解決方案

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

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

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

  1.  #container{
  2. background:#ffcurl(mid.jpg)repeat-ycenter;
  3. position:absolute;
  4. left:50%;
  5. width:760px;
  6. margin-left:-380px;
  7. }

看,沒有任何hack!雖然這並不是首選的解決方案,但也是個不錯的方法,且適用性極廣—甚至在NetscapeNavigator4.x中都沒有任何問題,很令人吃驚,不是嗎?所以若想得到最廣泛的浏覽器支持,那麼這種方法將會是最好的選擇。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved