CSS網(wǎng)頁布局DIV水平居中的各種方法.doc_第1頁
CSS網(wǎng)頁布局DIV水平居中的各種方法.doc_第2頁
CSS網(wǎng)頁布局DIV水平居中的各種方法.doc_第3頁
全文預覽已結(jié)束

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)

文檔簡介

CSS網(wǎng)頁布局DIV水平居中的各種方法一、margin:auto 0 與 text-aligh:center 在現(xiàn)代瀏覽器(如Internet Explorer 7、Firefox、Opera等)現(xiàn)代瀏覽器實現(xiàn)水平居中的方法很簡單,只要設(shè)定到左右兩側(cè)的空白為自動即可。意即: #wrap margin:0 auto; 上面這段代碼的意思是說使wrap這個div到左右兩側(cè)的距離自動設(shè)置,上下為0(可以為任意)。請在現(xiàn)代瀏覽器(如Internet Explorer 7、Firefox、Opera等)中運行現(xiàn)在的代碼: style type=text/css div#wrap width:760px; margin:0 auto; border:1px solid #333; background-color:#ccc; /style /head body div id=wrap 在Firefox等現(xiàn)代瀏覽器設(shè)定頁面元素的水平居中,只要指定margin:0 auto;即可 pre div#wrap width:760px; margin:0 auto; /*這里的0可以任意值*/ border:1px solid #ccc; background-color:#999; /pre /div 上面的效果很好。但是這在Internet Explorer 6及改正的版本中是不起作用的,不過幸好它有自己的解決辦法。在Internet Explorer中text-align屬性是可繼承的,即在父元素中設(shè)置后在子元素中就默認具有了該屬性。因此我們可以在body標簽中設(shè)置text-align屬性值為center,這樣頁面內(nèi)所有的元素都會自動居中,同時我們還要加一個hook把頁面中的文字變成我們習慣的閱讀方式居左對齊。因此我們要如此來寫代碼: body text-align:center; #wrap text-align:left; 這樣在Internet Explorer中我們就輕松實現(xiàn)了Div的居中對齊。因此要在所有的瀏覽器中顯示居中的效果,我們就可以這樣寫我們的代碼: body text-align:center; #wrap text-align:left; margin:0 auto; style type=text/css body text-align:center; div#wrap text-align:left; width:760px; margin:0 auto; border:1px solid #333; background-color:#ccc; /style div id=wrap 在Firefox等現(xiàn)代瀏覽器設(shè)定頁面元素的水平居中,只要指定margin:0 auto;即可 pre div#wrap width:760px; margin:0 auto; /*這里的0可以任意值*/ border:1px solid #ccc; background-color:#999; 在Internet Explorer 6 及以下的版本中我們還要做以下的設(shè)置: body text-align:center; div#wrap text-align:left; /pre /div 不過這里有一個前提,就是設(shè)置居中的元素要有固定的寬度,比如這里我們設(shè)定了為760像素。二、相對定位與負的邊距 對于wrap進行相對定位,然后使用負的邊距抵消偏移量。這種方法比較簡單還很容易實現(xiàn): #wrap position:relative; width:760px; left:50%; margin-left:-380px 這段代碼的意思是,設(shè)置wrap的定位是相對于其父元素body標簽的,然后將其左邊框移動到頁面的正中間(也就是left:50%含意);最后我們再從中間位置向左偏移回一半的距離來,這樣就實現(xiàn)了水平居中了。 style type=text/css div#wrap position:relative; width:760px; left:50%; margin-left:-380px; border:1px solid #333; background-color:#ccc; /style div id=wrap 在所有瀏覽器中都有效的方法: pre div#wrap position:relative; width:760px; left:50%; margin-left:-380px; border:1px solid #333; background-color:#ccc; /pre /div 同樣,在設(shè)定水平居中前你需要設(shè)定一個固定的寬度。 P.S.究竟選擇哪個方法? 上面兩個方法究竟選擇哪種方法好呢?在第一種方法中貌似使用了Hack技術(shù),其實并沒有,它是中規(guī)中矩的Web標準寫法,完全符合規(guī)范,因此,兩個種方法中完全可以隨便的選取其中的任一種進行使用,他們不存在CSS hack的問題。三、其它的居中方式 上面所說的都是設(shè)定了具體寬度的情況下水平居中的實現(xiàn)。有時候我們想做一個彈性布局,或者當一個元素處于一個容器中時我們只想讓它居中并不想設(shè)定一個具體的寬度。其實這并不是真正的居中布局,就像對一個100%長度的元素來說,你說它是居中對齊還是居左對齊呢?所以所有不高寬度的居中都不是真正的居中。這樣的設(shè)計我們是使用的像元素的padding來設(shè)置的,實際中我們是改變了父元素的容器大?。?如我們希望wrap元素長度隨窗口而改變,同時又維持居中,我們就可以這樣寫: body padding:10px 150px; 這里,我們只需要保持父元素左右兩側(cè)的填充是相等的就可以了。 style type=text/css body padding:10px 150px; div#wrap border:1px solid #333; background-color:#ccc; /style /head bo

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論