(css定位)position:absolute;時居中


我們習慣用margin:0,auto;居中元素,但有時我們必須要讓元素獲得position:absolute;,這時候,再用margin:0,auto;居中是無效的。

舉個例子

 1 <!DOCTYPE html>
 2 
 3 <html>
 4 
 5  <head>
 6 
 7   <title>wheel</title>
 8 
 9   <style type="text/css" >
10 
11    #sample{
12 
13     width: 900px;
14 
15     height: 600px;
16 
17     position: absolute;
18 
19     margin: 0,auto;
20 
21     background: #A5A5A5;
22 
23    }
24 
25   </style>
26 
27  </head>
28 
29  <body id="body">
30 
31   <div id="sample">
32 
33   </div>
34 
35  </body>
36 
37 </html>

在這里,雖然css有margin: 0,auto;,顯示效果如下圖所示,沒有居中

(css定位)position:absolute;時居中

我們需要把代碼改為

 1 <!DOCTYPE html>
 2 
 3 <html>
 4 
 5  <head>
 6 
 7   <title>wheel</title>
 8 
 9   <style type="text/css" >
10 
11    #sample{
12 
13     width: 900px;
14 
15     height: 600px;
16 
17     position: absolute;
18 
19     left: 50%;
20 
21     margin-left: -450px;
22 
23     background: #A5A5A5;
24 
25    }
26 
27   </style>
28 
29  </head>
30 
31  <body id="body">
32 
33   <div id="sample">
34 
35   </div>
36 
37  </body>
38 
39 </html>

在這里我們做了兩個改動,就是加了

    left: 50%;

    margin-left: -450px;

為什么這么改呢,left是在position屬性是absolute或fixed時才有效的, left: 50%;意思距離左邊是界面的百分之五十,這是div的左邊邊界正好在畫面的中間線,這是我們再左移圖片的一半長度的距離,就可移使圖片中間與畫面中間重疊

而且在縮放時,仍保持居中。

(css定位)position:absolute;時居中


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM