Question

我想将灰色div放在这些绿色div之间：

http://i.stack.imgur.com/iRgwl.png

我一直在做我能想到的一切，但我几乎无法以正确的方式将div对齐在中心。

这是我的代码：

HTML：

<div id="header">
  <div id="header_pattern"></div>
  <div id="header_menu">
    <div id="menu_wrap">Contejnt for  id "header_menu" Goes Here</div>
  </div>
</div>
<div id="container">
  <div id="main_photo">Content for  id "container" Goes Here</div>
</div>
<div id="footer">
  <div id="footer_main">Content for  id "footer_main" Goes Here</div>
</div>

CSS：

#header {
    height: 150px;
    margin: 0px;
    padding: 0px;
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px;
    float: left;
    z-index: 900000;
}
#header_pattern {
    height: 50px;
    width: 100%;
    left: 0px;
    top: 0px;
    background-image: url(images/head_pattern.png);
    background-repeat: repeat-x;
    background-attachment: fixed;
}
#header_menu {
    background-color: #19350f;
    height: 50px;
    width: 100%;
    left: 0px;
    top: 50px;
}
#container {
    height: 850px;
    width: 960px;
    top: 100px;
    background-color: #666;
    position: absolute;
    margin-right: auto;
    margin-left: auto;
    left: auto;
}
#main_photo {
    height: 450px;
    width: 960px;
}
#footer {
    height: 150px;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 950px;
    background-color: #2f772f;
}
#menu_wrap {
    height: 50px;
    width: 960px;
    margin-right: auto;
    margin-left: auto;
}
#footer_main {
    height: 150px;
    width: 960px;
    margin-right: auto;
    margin-left: auto;
}

请尽快回复，谢谢。：）

Answer 1

只需将left:0;和right:0;添加到#container代码

即可

#container {
height: 850px;
width: 960px;
top: 100px;
background-color: #666;
position: absolute;
margin-right: auto;
margin-left: auto;
left: auto;
left: 0;
right: 0;
}

它会做那件事

Answer 2

#container {
height: 850px;
width: 960px;
top: 100px;
background-color: #666;
position: absolute;
margin-left: -480px;
left: 50%;
}

Answer 3

#container {
  margin-left:auto;
  margin-right:auto;
}

如何将div夹在两个绝对div之间？

3 个答案: