0

如何将 div 设置在 div#gallery的中心#warp？这是一个演示 JS Fiddle。

HTML：

<div id="warp">
    <div id="header">
        <img id="logo_l" src="images/centerwow-logo.png" alt="Centerwow - Web Design - Logo" />
        <img id="Logo_r" src="images/web-design-logo.png" alt="centerwow.com - Portfolio" title="Portfolio" >
        <div id="menu">
            <li><a href="#"  title="About Us">About Us</a>
            <li><a href="#" name="aboutus" title="About Us" >Company Info</a></li>
            <li><a href="#" name="profile"  title="Profile" > Profile</a></li>
        </div>    
    </div>

    <div id="gallery"></div>
</div>

CSS：

html body{
    margin:0;
    padding:0;
}

body{
    background:#F7F7F7;
}

#warp{
    position:relative;
    margin:0 auto;
}

#header {
        position:relative;
        background:#DEEAF4;
        width:80%;
        height: 100px;
        margin:0 auto;

    }
#logo_l{
    position:absolute;
    left:0;
    top:0;
    margin:0;
    padding:0;

}

#Logo_r{
    position:absolute;
    width:272px ;
    height:100px;
    right:0;
    top:0;
    margin:0;
    padding:0;

}    

#menu li {
    display: block;
    vertical-align: top;
    float:left;
    margin: 0 5px;
    }

#menu {
    position:relative;
    width:250px;
    top: 35px;
    margin: 0 auto;

    }
#gallery{
    position:absolute;
    background:#EBF0F5;
    width:80%;
    height:70%;
    margin:10px auto;
    padding:10px;
}    
​
4

3 回答 3

2

您不需要包括position: absolute居中#gallery。这已经通过margin: 10px auto.

此外，要将百分比高度设置为#gallery，其父元素必须具有特定高度。在这种情况下，我假设您希望它基于视口高度。为此，每个祖先 div 的高度必须为 100%：

*, html, body, #warp {
    height: 100%;
}

JS 小提琴：http: //jsfiddle.net/qc9WL/1/

注意：我还注意到您的 HTML 和 CSS 中存在一些错误。

  • 您需要在样式表之一之间body和行中使用逗号html
  • 制作列表时应该使用<ul>or<ol>标记
  • 最后，别忘了关闭你<li>的第六行
于 2012-07-15T16:50:50.417 回答
2

我不确定您要在这里实现什么 -position: absolute这#gallery正是导致问题的原因（这就是为什么margin: 10px auto不起作用）。如果删除它，该#gallery元素将位于中心。

left: 50%;此外，您可以通过设置和margin-left: -40%;（在这种情况下为-40%，因为您将宽度#gallery设置为 80%）水平居中已知宽度的绝对定位元素

于 2012-07-15T16:51:17.720 回答
0

既然您以百分比指定画廊宽度，为什么不尝试以百分比设置左右边距？

margin: 10px 10%;

将分部置于中心

于 2012-07-15T16:57:16.343 回答