CSS樣式
CSS DIV 置中
如果你習慣採用 DIV 來做網頁的排版,那就難免會碰到需要讓 DIV 置中的時候,在大部分主流的瀏覽器中,想要要讓 DIV 置中,僅需要用到 margin 就能夠達成,但在 IE 瀏覽器可就不是這麼一回事囉!這篇分享幾種不同的情況。
一、適用於大部分瀏覽器的 DIV 置中語法
margin:0px auto;
這樣的寫法基本上適用於 FireFox、Google Chrome、Opera 等常見主流瀏覽器。
二、適用於 IE8 的 DIV 置中語法
<div style="text-align:center;background-color:#FFAC55;width:500px;height:50px;">
<div style="background-color:#FFAFFE;width:300px;height:20px;margin:0 auto;"></div>
</div>
<div style="background-color:#FFAFFE;width:300px;height:20px;margin:0 auto;"></div>
</div>
示意圖
這個技巧是使用兩個 <DIV> 來配合,父層的 <DIV> 設定 text-align:center 的意思是區塊內置中對齊。範例中使用到的 background-color 是背景顏色,主要目的僅是讓範例更容易呈現,另外 width 與 height 分別是 div 的寬度與高度。
三、適用於 IE6 與 IE7 的 DIV 置中語法
_margin:0px auto; //適用於 IE6 *margin:0px auto; //適用於 IE7
以上的 DIV 置中方式主要是讓整個 DIV 區塊置中,而不是 DIV 內的元素置中,如果你想要讓 DIV 內的文字、圖片或其他元素能夠置中,請參考 CSS text-align 與 CSS 文字垂直置中。
Post a Comment
0 Comments