0

我有一个div我想在窗口居中的包装。我使用以下 CSS 来完成此操作：

#wrapper {
    width: 960px;
    margin-left: -480px;
    position: absolute;
    left: 50%;
}

唯一的问题是，当我改变浏览窗口的大小时，我看不到窗口中点的任何东西。我知道这是因为负边距，但是有什么办法可以纠正这个问题吗？

我试图将它浮动在其他一些divs 上，因此自动保证金技巧将不起作用。

这是我所拥有的链接：dev.connectionsquad.com。

4

2 回答 2

0

我建议重写您的代码并使其符合标准，如下所示：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    min-height: 600px;
}
body {
    background: #222;
    text-align: center
}
#content {
    text-align: left;
    display: inline-block;
    position: absolute;
    width: 40%;
    min-width: 300px;
    height: 50%;
    min-height: 400px;
    top: 10%;
    margin-left: -20%;
    padding: 25px;
    background-color: #ccc;
    background-image: url('/img/noise.png');
    border: 5px solid #000
}
#background {
    position: absolute;
    width: 100%;
    height: 250px;
    top: 50%;
    margin-top: -125px;
    z-index: -1;
    background-color: #666;
    background-image: url('/img/placeholder.png');
    border-top: 5px solid #eee;
    border-bottom: 5px solid #eee;
}
a:active, a:visited {
    color: #075f76
}
    </style>
</head>
<body>
    <div id="content">
        <h1>Test</h1>
    </div>
    <div id="background"></div>
</body>
</html>

请参阅HTML5-MDN。

于 2012-07-23T02:44:16.613 回答
0

对于以页面为中心的任何 div，我建议以下内容。 body { text-align: center; } #wrapper { width: 1080px; margin: 0px auto; text-align: left; }

对于某些浏览器，您必须在 body 标记上使用 text-align: center 以使 div 在页面中居中。

于 2012-07-23T00:53:05.240 回答