DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> Div 在頁面中居中
Div 在頁面中居中
編輯:布局實例     

 以下為讓div顯示在浏覽器正中間的樣式

<style type="text/css"> 
#centerdiv { 
position:absolute; <!--這個屬性是設置div以絕對位置顯示-->
top:50%;           <!--在離頂部50%的位置顯示-->
left:50%;          <!--在離左邊50%的位置顯示-->
margin:-150px 0 0 -100px;    <!--這個設置大家開始一看,可能覺得好像不是很明白,在下面為大家詳細講解--> 
width:300px; 
height:200px;
background:black; 
}  
</style> 

 

相信大家最不明白就是在margin:-150px 0 0 -100這個屬性上面,在不設置這個屬性的時候,這個div的x坐標為內容顯示部分的50%,y坐標為內容顯示部分的50%,顯示出來的然而這樣的話只能說這個div的起點是在正中間,我們需要的是將整個div顯示在正中間,所以給margin-left:-150px;(這裡的150是從width屬性中得來的它是等於width的一半,對應的margin-top也是通過通樣的方法得來的。)這樣就會把整個div的寬度分一半到左邊就可以讓其水平居中了,在設置margin-top:-100px;是同樣的道理,會將整個div的高度分一半到上面顯示。就形成了整個div在浏覽器的正中間顯示。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved