區塊垂直居中

如果把顯示器螢幕中點設為坐標原點(0 0),X軸的正方向是螢幕的右邊,Y的正方向螢幕的上邊。那麼在已知BOX寬度和高度的情況下,設BOX的屬性為絕對定位,top:50% left:50%,這樣的話,BOX的左上角就在坐標原點(0 0), 設margin-left:-320px(寬度的一半), 左上角的坐標(-320 0),再設margin-top:-240px(高度的一半),左上角的坐標現在是(-320 240),相對原點來說, BOX是完全居中了,四個頂點的值分比別是(320 240)Ⅰ, (-320 240)Ⅱ,(-320 -240)Ⅲ ,(320 -240)Ⅳ。

區塊layout,會置於瀏覽器的中央,語法如下:

body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;/*--for opera--*/
}

#layout{
position: absolute;/*--絕對定位--*/
top: 50%;
left: 50%;
margin-top: -240px;/*--div高度的一半--*/
margin-left: -320px;/*--div寬度的一半--*/
width: 640px;
height: 480px;
background: #ECECEC;
}

pre{
padding: 15px;
}

HTML語法:
張貼留言

這個網誌中的熱門文章

互補色與對比色解惑

[讀書心得] 設計思維 Design Thinking

龍岡手繪地圖製作有感