我有一个通过 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;
}
我希望有人能帮助我找到解决方案。我们将不胜感激。
最佳答案
你忘了关闭#main_content，替换
<div id="main_content">
<div id="main">noisy lines...</div>
<div>
与
<div id="main_content">
<div id="main">noisy lines...</div>
</div>
并在 #main_content 的 CSS 中添加 left: 50%
关于html - 居中对齐 2x DIV - 如何？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19208092/