WEBTECH 網頁設計教學站
CSS DIV 置中最簡單的方法,相容各式瀏覽器
在 CSS 排版上我們常會碰要需要將 div 置中的時候,與 HTML 很大的不同是,HTML 只要設定 align=center 就可以輕鬆置中,然而在 CSS 中,要讓一個 div 置中必須用到 margin 的寫法,不過 div 置中比較麻煩的問題在於各家瀏覽器的支援狀況,特別是老舊的 ie6,所以我們這邊介紹可以適用於 ie6、ie7、ie8、Chrome、Opera 與 firefox 的 div置中寫法。

第一種 div 置中方法,適用於 FireFox、Chrome、Opera,真是太棒了!

margin: 0px auto;

第二種 div 置中方法,IE8 適用

要在 IE8 成功置中可以用兩個 div 相互合作,外面的 div 要設定 text-align:center,讓包在裡面的 div 可以順利置中


開啟程式碼頁面

第三種 div 置中方法,適用於 IE7

*margin: 0px auto;

第四種 div 置中方法,適用於 IE6

_margin: 0px auto;

總結

搞不懂為什麼一個簡單的 div 置中,各家瀏覽器都有共識,唯獨 ie 要跟人家不一樣,而且 ie6~ie8 竟然就要三種不同的寫法 .......

延伸閱讀相關外部網頁

連絡我們