2

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

2 回答 2

3

为了让浏览器能够正确居中一个 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;
    }

这将使包装器所在的浏览器处于绝对位置，距顶部 0 个单位，距左侧 50% 的浏览器窗口...使其居中，只需将其拉回给定宽度的一半，因此-450px的margin-left。

现在，您的内容应该设置为 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>
于 2010-05-30T04:10:14.580 回答
1

将 div IMO 居中的最佳方法是创建一个名为 wrapper 的主 div 并在 css 中分配一个边距：0 auto; 到那个元素。

因此，所有内容将从顶部、左侧、右侧、底部等均等居中

于 2010-05-30T03:54:03.580 回答