代码之家 › 专栏 › 技术社区 › mangosaft

对齐2个DIV居中-如何?

scrollable center css-position css html

0

mangosaft · 技术社区 · 11 年前

我有一个通过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;
}

我希望有人能帮助我并找到解决方案。我们将不胜感激。

1 回复 | 直到 11 年前

1

0

GreyRoofPigeon 11 年前

你忘了结账 #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% 到的CSS #主要内容