中心div水平不在容器div内工作

时间：2015-03-28 14:15:33

标签： html css alignment containers

我已经挣扎了好几天，但一定要错过一些愚蠢的东西，希望你能帮忙！

基本上我正在构建一个带有页眉，正文和页脚的网站。标题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;
}

2 个答案:

答案 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;
}
相关问题
最新问题