Question

我有一个通过CSS集中对齐的DIV。但问题是：当我想将第二个DIV对齐到中间时，那么这个DIV会扭曲或左对齐。具有“绝对位置”且必须可滚动的DIV非常重要。另一个“固定位置”的DIV包括固定，必须始终保持在最顶层。我究竟做错了什么？查看图片：http://home.arcor.de/freedownload/wrong.jpg以下是HTML代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//DE"
        "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//DE"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>

<head>
<title>{TITLE}</title>
<link href="site.css" type="text/css" rel="stylesheet">
</head>

<body>
<div id="top_fixed_content">
    <div id="topheader">
        <span id="topheader_logo"></span>
    </div>
    <div id="navigation"></div>
</div>
    <div id="main_content">
    <div id="main">noisy lines...</div>
    <div>
</body>

</html>

这是CSS代码：

html {
    background-image:url(sitebg.png);
}
body {
    margin: 0px;
    padding: 0px;
}
a {
    color: #41a9ef;
    font-family: Verdana;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
}
a:hover {
    color: #ff9900;
    text-decoration: none;
}
#top_fixed_content {
    position: fixed;
    left: 50%;
    width: 1170px;
    margin-left: -585px;
    z-index: 1000;
}
#topheader {
    background-color: #fbfbfb;
    height: 103px;
}
#topheader_logo {
    position: absolute;
    top: 33px;
    left: 10px;
    background-image:url(logo.png);
    background-repeat: no-repeat;
    width: 232px;
    height: 40px;
    display: block;
}
#navigation {
    background-image:url(navigationbg.png);
    background-repeat: repeat-x;
    background-color: #48b1f8;
    height: 34px;
}
#main_content {
    position: absolute;
    background-color: #fbfbfb;
    width: 1170px;
    margin-left: -585px;
}

我希望有人可以帮助我并找到解决方案。我们将完全赞赏。

Answer 1

您忘了关闭#main_content，替换

<div id="main_content">
<div id="main">noisy lines...</div>
<div>

与

<div id="main_content">
<div id="main">noisy lines...</div>
</div>

将left: 50%添加到#main_content

的CSS中

对齐2x DIV居中 - 如何？

1 个答案: