Question

好吧，我将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>

Answer 1

为了让浏览器能够纠正div的中心，你必须给它一些关于div的信息，所以：

    .wrapper
    {
        margin: auto;
    }

（从你的代码中复制）这是错的，但是：

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

工作得很好！你告诉浏览器你的包装器宽度为900px，其余浏览器应该由包装器左右两侧平均分开...这样边缘：自动;将为您提供任何东西......需要单位规格（居中，使用0）。

你的代码中的另一个问题是你有一个绝对位置的包装器的内容，并且它将被浏览器呈现为你的包装器之外的元素..所以，就像你的包装器不存在一样，这样：

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

这将是包装器所处的浏览器处于绝对位置，从顶部开始为0，从左侧开始浏览器窗口的50％...将其拉回到中间位置给定的宽度，因此-450px的边距左。

现在，您的内容应设置为position：relative;关于包装器的位置相对定位...

好的，这是你的代码（已测试）：

<!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>

Answer 2

中心div IMO的最佳方法是创建一个名为wrapper的主div，并在css中分配一个margin：0 auto;那个元素。

因此，所有内容将同样集中在顶部，左侧，右侧，底部等

将Div放在页面中间

2 个答案: