Question

如何在div [{1}}的中心设置div #gallery？这是demo JS Fiddle。

HTML：

#warp

CSS：

<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>

Answer 1

您无需将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>或<ol>标记
最后，不要忘记关闭第6行的<li>

Answer 2

我不确定您要在此处实现的目标 - position: absolute #gallery正是造成问题的原因（这就是为什么margin: 10px auto无效）。如果删除它，#gallery元素将位于中心。

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

Answer 3

由于您是以百分比指定图库宽度，为什么不尝试以百分比设置左右边距？

margin: 10px 10%;

将分部置于中心

绝对的位置不起作用

3 个答案: