CSS DIV 網頁置中

CSS DIV 網頁置中是新一代網頁排板常用到的技巧之一唷!通常說到 DIV 網頁置中,指的是讓 DIV 區塊固定在整個網頁的中間,或者是在父層 DIV 區塊內的置中,用到的技巧有一點點不同,其實要讓 DIV 區塊在網頁置中很簡單,只需要用到 margin 的外距屬性就辦得到。

CSS DIV 網頁置中範例一、在網頁內置中
這個範例 DIV 區塊將在網頁置中,最關鍵的語法有三個,第一個就是 margin 的外距屬性,我們設定了『margin:0 auto;』讓 DIV 區塊的左右兩邊自動平衡,不過光是這樣還不夠,必須設定 DIV 區塊的寬度與高度才能實現。

區塊中的其他 css 語法,background-color 是設定背景顏色用的,padding 是設定內距,color 則是文字顏色,這幾個屬性都只是為了讓範例比較清楚呈現而已,與 DIV 網頁置中效果並沒有關係,若有興趣研究這些 css 常用功能的話,可以看這幾篇的內容。
範例一個語法可以寫在一份空白文件並存檔為 test.html 之後,再用瀏覽器開啟檔案,應該就可以看到一個綠色的區塊在網頁正中間,靠上方的位置。

CSS DIV 網頁置中範例二、在父層 DIV 區塊內置中
呈現效果
CSS DIV 置中範例圖片
範例二是把範例一的效果進一步延伸,讓兩個包在一起的 DIV 區塊能夠置中,第一個 DIV 區塊就是延續範例一的樣式,然後我們在其中再添加一個比較小的 DIV 區塊,同時,將比較小的 DIV 區塊也增加『margin:0 auto;』的屬性值,讓整個範例呈現出兩個 DIV 區塊置中效果。

由這兩個範例可以看出 DIV 網頁置中是一種相對的置中效果,當最外層的 DIV 區塊用這種方式置中,代表其相對於整個網頁置中。第二層的 DIV 區塊用同樣的方式置中,代表是相對於外層的 DIV 置中。 換句話說,假設範例二的外層綠色 DIV 區塊並未使用『margin:0 auto;』的屬性值,內層白色的 DIV 區塊依舊會在其內部置中。
分享於 2014-08-22