Html 元素水平居中方案總結

2022-05-08 15:30:11 字數 1554 閱讀 5445

先來看我乙個簡單xhtml/html檔案**(部分),我們的目的是讓#container水平居中。

lorem ipsum dolor sit amet, consectetuer adipiscing elit.phasellus varius eleifend.

使用自適應邊界(auto margin)

水平居中任意元素的首選辦法是使用邊界(margin)性質(property),並把左右之值設定為auto。但你必須為#container指定乙個寬度。

div#container 

這個方案在任何當代瀏覽器上都有效,即使是ie6,前提是在web標準相容模式下(compliance mode)。不幸的是,它不會在先前版本的ie/win中工作。我們為此列乙個**:

瀏覽的自適應邊界支援一覽表 瀏覽器 版本 支援 

internet explorer 6.0, compliance mode 是 

internet explorer 6.0, quirks mode 否 

internet explorer 5.5 windows 否 

internet explorer 5.0 windows 否 

internet explorer 5.2 macintosh 是 

mozilla 所有當前版本 是 

mozilla firefox 所有版本 是 

netscape 4.x 否 

netscape 6.x+ 是 

opera 6.0, 7.0 macintosh and windows 是 

safari 1.2 是 

儘管受到瀏覽器支援的限制,大部分設計師還是提倡你盡可能這樣做。但我們依然可以使用css應付一切情況。

使用文字排列(text-align)

此方案需要使用到text-align性質,應用給body元素並且賦予center的值。

body 

它公正地對待各種瀏覽器,十分徹底,唾手可得。然而,這是賦予文字的性質,它使#container中的文字也居中了。所以,在布局上我們還得做一些額外工作:

div#container 

這樣才可以把文字的對齊方式返回預設狀狀態。

綜合邊界和文字排列

因為文字排列向後相容,當代瀏覽器也支援自適應邊界,很多設計師把他們結合起來,實現跨瀏覽器使用。

body 

#container 

唉,依然不完美,因為還是乙個黑客技巧 (hack)。你不得不為文字排列寫下多餘的規則。但現在,我們可以使用更完美的跨瀏覽器的方案。

負邊界解決方案

此方案得結合使用絕對定位(absolute positioning )。首先,把#container絕對定位並左偏移50%,這樣,#container的左邊界就是頁面解析度的一半。下一步,把#container的左邊界設定為負值,值大小為#container寬度(width)的一半。

#container 

看,沒有任何黑客技巧(no hacks)!連netscape 4.x都支援!

html 元素水平居中方式

本文將簡單敘述元素居中的基本方法。區 1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title center title 67 head 8 body 9 h1 style text align center html中元素的...

HTML水平居中方法

一 對於行內元素採用text align center 的方式 二 採用margin 0 auto 來實現水平居中顯示 三 用table實現 四 塊級的元素但是通過轉換成行內元素來實現塊級元素的水平居中顯示 五 父子元素都採用相對定位,父元素left 50 子元素left 50 相對自己的長度減回5...

元素水平居中方式

1 對於行內元素來說,直接可以通過設定父元素的 text align center 1 正確 2 div style text align center 3 img 4div 56 錯誤 7 a href img a 2 塊級元素設定 margin 0 auto 必須設定塊級元素寬度才能實現元素居中...