居中對齊2個DIV - 如何？

我有一個通過CSS集中對齊的DIV。但問題是：當我想對齊中間的第二個DIV時，則此DIV失真或左對齊。具有「絕對位置」且必須可滾動的DIV非常重要。另一個「固定頭寸」的DIV包括固定頭寸，並且必須始終保持最高。我究竟做錯了什麼？看到圖像：http://home.arcor.de/freedownload/wrong.jpg下面是HTML代碼：居中對齊2個DIV - 如何？

<!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; 
}

我希望有人能幫助我，找到解決方案。這將是充分讚賞。

來源

2013-10-06 mangosaft

你忘了關閉#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

來源

2013-10-06 11:08:09 LinkinTED

的CSS你是對的！謝謝！有用！！！ :) – mangosaft

居中對齊2個DIV - 如何？

回答

相關問題