CSS 的 DIV 區塊置中簡單技巧,一起來學習

想要學習 CSS 的 DIV 區塊如何置中,首先要學習的是 DIV 是啥玩意兒?簡單的說,他就是一個區塊,想像一下報紙或平面雜誌上的美編是不是也是一個一個的區塊所組成的呢。同樣的觀念拉到網路上,每個網頁能夠排得美美的,也是一個個的區塊去組成一張美麗的網頁,網頁上的每個區塊就是 DIV 囉!

當然有人會說區塊不一定是 DIV 呀!說不定是 table 所排出來的結果,雖然這樣說也並非完全錯誤,甚至是正確的,不過未來 CSS 會成為主流(現在應該就是了吧!),用 Table 的排版方式雖然很簡單,但維護起來其實並沒有比 CSS DIV 來得容易,所以這一篇就介紹一下 CSS 的 DIV 置中方法,讓各位稍微體驗一下怎麼樣透過 CSS 來排版。

了解了 CSS 的 DIV 概念後,緊接著就可以將 DIV 區塊置入 style 來排版囉!一般 browser 可以支援的語法可以寫成像下方這樣:

margin:0px auto;

就真的如此容易,搭配著寬度,作出一個置中的網頁很簡單吧!僅僅使用了 margin 的屬性,就可以完成我們要的效果,難怪 CSS 會成為主流 ^-^

不過話又說回來,這樣的寫法不見得會完全有效果唷!有兩個原因可能會造成失效,第一個原因就是如果該區塊繼承了父層的屬性,剛好父層又設定了其他排版方式,就有可能會失效,第二個原因就是如果流覽你的網頁的網友使用的是 IE 瀏覽器,這樣的寫法可能也會失去效用,不過有解決方式,Wibibi 有下面這篇完整的介紹。

CSS DIV 置中
http://www.wibibi.com/info.php?tid=147

這一篇介紹了 IE6、IE7、IE8 的解決方案,語法僅有一點點差異,相信很有幫助。