定位Div在頁面中間

好吧，我把div封裝在div中。爲什麼這不起作用？定位Div在頁面中間

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
    <title>test.html</title> 
    <style type="text/css"> 
     .wrapper 
     { 
      margin: 0px auto; 
     } 
     .testimonials_png 
     { 
      position: absolute; 
      left:20px; 
      top:397px; 
      width:220px; 
      height:395px; 
      background: url("test_files/testimonials.png") no-repeat; 
     } 
     .homeLink_png 
     { 
      position: absolute; 
      left:-1px; 
      top:243px; 
      width:203px; 
      height:75px; 
      background: url("test_files/homeLink.png") no-repeat; 
     } 
     .sidingLink_png 
     { 
      position: absolute; 
      left:202px; 
      top:243px; 
      width:180px; 
      height:75px; 
      background: url("test_files/sidingLink.png") no-repeat; 
     } 
     .windowsLink_png 
     { 
      position: absolute; 
      left:382px; 
      top:243px; 
      width:181px; 
      height:75px; 
      background: url("test_files/windowsLink.png") no-repeat; 
     } 
     .roofingLink_png 
     { 
      position: absolute; 
      left:563px; 
      top:243px; 
      width:183px; 
      height:75px; 
      background: url("test_files/roofingLink.png") no-repeat; 
     } 
     .aboutLink_png 
     { 
      position: absolute; 
      left:746px; 
      top:243px; 
      width:205px; 
      height:75px; 
      background: url("test_files/aboutLink.png") no-repeat; 
     } 
     .banner_png 
     { 
      position: absolute; 
      left:0px; 
      top:0px; 
      width:950px; 
      height:243px; 
      background: url("test_files/banner.png") no-repeat; 
     } 

    </style> 
    </head> 
    <body> 
    <div class="wrapper"> 
    <div class="testimonials_png"> </div> 
    <div class="homeLink_png"> </div> 
    <div class="sidingLink_png"> </div> 
    <div class="windowsLink_png"> </div> 
    <div class="roofingLink_png"> </div> 
    <div class="aboutLink_png"> </div> 
    <div class="banner_png"> </div> 
    </div> 
    </body> 
</html>

來源

2010-05-30 shinjuo

div標籤是坐在另一個div的外面。爲什麼不在容器分區內？ – shinjuo 2010-05-30 04:14:53

對於瀏覽器爲中心能夠correcty中心一個div，你必須給它有關的div一些信息，所以：

.wrapper 
    { 
     margin: auto; 
    }

（從您的代碼複製），這是錯的，但是：

.wrapper 
    { 
     width:900px; 
     margin:0 auto; 
    }

作品就好了！你告訴瀏覽器你的包裝爲900px的寬度，其餘的瀏覽器應該由包裝左側和右側平分...因此margin：auto;將不會提供任何...需要單位規格（用於居中，使用0）。

你的代碼中的另一個問題是，你有包裝的位置絕對的內容，這將被瀏覽器呈現爲包裝外的元素..所以，就好像你的包裝不在那裏，所以：

.wrapper 
    { 
     postion:absolute; 
     top:0; 
     left:50%; 
     width:900px; 
     margin-left:-450px; 
    }

這將是包裝在一個絕對位置的，它是從頂部0units，並從左側的瀏覽器窗口的50％的瀏覽器...使其居中，只需將其拉回給定寬度的一半，即-450px的餘量。

現在，您的內容應設置爲position：relative;要相對定位有關包裝的位置...

OK，這裏是你的代碼（測試）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
    <title>test.html</title> 
    <style type="text/css"> 
     .wrapper 
     { 
      position:absolute; 
      left:50%; 
      width:950px; 
      margin-left:-475px; 
     } 
     .testimonials_png 
     { 
      position: absolute; 
      left:20px; 
      top:397px; 
      width:220px; 
      height:395px; 
      background:green url("test_files/testimonials.png") no-repeat; 
     } 
     .homeLink_png 
     { 
      position: absolute; 
      left:-1px; 
      top:243px; 
      width:203px; 
      height:75px; 
      background:purple url("test_files/homeLink.png") no-repeat; 
     } 
     .sidingLink_png 
     { 
      position: absolute; 
      left:202px; 
      top:243px; 
      width:180px; 
      height:75px; 
      background:orange url("test_files/sidingLink.png") no-repeat; 
     } 
     .windowsLink_png 
     { 
      position: absolute; 
      left:382px; 
      top:243px; 
      width:181px; 
      height:75px; 
      background:yellow url("test_files/windowsLink.png") no-repeat; 
     } 
     .roofingLink_png 
     { 
      position: absolute; 
      left:563px; 
      top:243px; 
      width:183px; 
      height:75px; 
      background:blue url("test_files/roofingLink.png") no-repeat; 
     } 
     .aboutLink_png 
     { 
      position: absolute; 
      left:746px; 
      top:243px; 
      width:205px; 
      height:75px; 
      background:red url("test_files/aboutLink.png") no-repeat; 
     } 
     .banner_png 
     { 
      position: absolute; 
      left:0px; 
      top:0px; 
      width:950px; 
      height:243px; 
      background:pink url("test_files/banner.png") no-repeat; 
     } 

    </style> 
    </head> 
    <body> 
    <div class="wrapper"> 
     <div class="testimonials_png"> </div> 
     <div class="homeLink_png"> </div> 
     <div class="sidingLink_png"> </div> 
     <div class="windowsLink_png"> </div> 
     <div class="roofingLink_png"> </div> 
     <div class="aboutLink_png"> </div> 
     <div class="banner_png"> </div> 
    </div> 
    </body> 
</html>

來源

2010-05-30 04:10:14 Zuul

這對我來說非常合適：style =「position：absolute; top：100px; left：40％;」。由於div內容將佔用20％，因此我使用了40％。 – 2013-10-04 14:06:47

國際海事組織中心div的，最好的方法是創建一個主DIV命名包裝和CSS分配保證金：0汽車;到那個元素。

因此，所有的內容都將被平等地從頂部，左側，右側和底部等

來源

2010-05-30 03:54:03 RobertPitt

我在上面的代碼中包裝了divs，但它並沒有在divs周圍創建容器，爲什麼不呢？ – shinjuo 2010-05-30 04:05:12

定位Div在頁面中間

回答

相關問題