定位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在页面中间

回答

相关问题