我已经挣扎了好几天，但一定要错过一些愚蠢的东西，希望你能帮忙！
基本上我正在构建一个带有页眉，正文和页脚的网站。标题div有一个嵌入的flash元素，工作正常。 我使用以下方法将所有div都集中在一起：
Position: absolute;
Width: 2000px;
Margin-left: -1000px;
Left: 50%;
这很好用，直到我试图让页脚停留在页面底部，但在调整大小时不与其他内容重叠。但是我感谢StickyFooter，并将div放在容器div之外，并将所有div位置更改为“相对”。
但是现在我的容器内的所有内容都不想再正确居中了，我只是无法把它弄好。有什么想法吗？真的很感激。
这是我的HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Site</title>
<link href="CSS/lum.css" rel="stylesheet" type="text/css" />
<script src="js/flexcroll.js" type="text/javascript"></script>
<script src="js/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
</script>
</head>
<body>
<div id="container" align="center">
<div id="header">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="2000" height="500" id="lum_topbar" align="middle">
<param name="movie" value="lum_topbar.swf" />
<param name="quality" value="best" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="transparent" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="lum_topbar.swf" width="2000" height="500">
<param name="movie" value="lum_topbar.swf" />
<param name="quality" value="best" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="transparent" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<iframe name="ifcontent" id="ifcontent" frameborder="0" allowtransparency="true" src="home.html"></iframe>
</div>
<div id="footer">
<div id="footer_img"><img src="images/footer.jpg" alt="footer" width="2000" height="227" usemap="#Map" border="0" />
<map name="Map" id="Map">
<area shape="rect" coords="961,32,1019,55" href="design.html" target="ifcontent" alt="design" onmouseover="MM_effectAppearFade('tick1', 300, 0, 100, false)" onmouseout="MM_effectAppearFade('tick1', 300, 100, 0, false)"/>
<area shape="rect" coords="977,57,1018,76" href="web.html" alt="web" target="ifcontent" onmouseover="MM_effectAppearFade('tick2', 300, 0, 100, false)" onmouseout="MM_effectAppearFade('tick2', 300, 100, 0, false)"/>
<area shape="rect" coords="810,79,1016,98" href="wedding.html" target="ifcontent" alt="wedding invites" onmouseover="MM_effectAppearFade('tick3', 300, 0, 100, false)" onmouseout="MM_effectAppearFade('tick3', 300, 100, 0, false)"/>
<area shape="rect" coords="936,100,1015,121" href="contactus.html" target="ifcontent" alt="contact us" onmouseover="MM_effectAppearFade('tick4', 300, 0, 100, false)" onmouseout="MM_effectAppearFade('tick4', 300, 100, 0, false)"/>
<area shape="rect" coords="932,126,1016,142" href="contactus.html" target="ifcontent" alt="quote" onmouseover="MM_effectAppearFade('tick5', 300, 0, 100, false)" onmouseout="MM_effectAppearFade('tick5', 300, 100, 0, false)"/>
</map>
<div id="div_ticks">
<table width="27" height="110" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="21"><img src="images/tick.png" name="tick1" width="21" height="6" id="tick1" onload="MM_showHideLayers('tick1','','hide')" /></td>
</tr>
<tr>
<td height="21"><img src="images/tick.png" name="tick2" width="21" height="6" id="tick2" onload="MM_showHideLayers('tick2','','hide')" /></td>
</tr>
<tr>
<td height="21"><img src="images/tick.png" name="tick3" width="21" height="6" id="tick3" onload="MM_showHideLayers('tick3','','hide')"/></td>
</tr>
<tr>
<td height="21"><img src="images/tick.png" name="tick4" width="21" height="6" id="tick4" onload="MM_showHideLayers('tick4','','hide')"/></td>
</tr>
<tr>
<td height="21"><img src="images/tick.png" name="tick5" width="21" height="6" id="tick5" onload="MM_showHideLayers('tick5','','hide')"/></td>
</tr>
</table>
</div>
</div>
</body>
</html>
这是我的CSS：
html, body {height: 100%;}
body {
padding: 0;
overflow-x: hidden;
background-color: #000;
background-image: url(../images/main.jpg);
background-position: center;
background-repeat: repeat-y;
height: 100%;
margin: 0;
}
#container {
position: relative;
width: 100%;
margin: 0;
min-height: 100%;
overflow: auto;
padding-bottom: 228px;
}
#header {
position: relative;
width: 2000px;
height: 456px;
margin-left: -1000px;
left: 50%;
z-index: 2;
}
#ifcontent {
position: relative;
overflow-x: hidden;
width: 1100px;
height: 610px;
margin-left: -550px;
left: 50%;
}
#footer {
position: relative;
width: 2000px;
height: 228px;
margin-left: -1000px;
left: 50%;
margin-top: -228px;
clear: both;
}
#div_ticks {
position: absolute;
width: 33px;
height: 121px;
z-index: 4;
left: 1036px;
top: 35px;
}
#footer_img {
position: absolute;
width: 200px;
height: 115px;
z-index: 1;
}
答案 0 :(得分：0)
你可以在这里摆脱大部分的CSS。您可以在不设置左侧的情况下居中元素：％50宽度和负边距。您需要做的就是设置元素的宽度，然后将左右边距设置为自动。
#header {
width:2000px;
margin-left:auto;
margin-right:auto;
}
答案 1 :(得分：0)
将标题css更改为
#header {
width: 2000px;
margin: auto;
}
并为您的对象添加css
#header object {
float: none;
display: inline;
}