位置绝对不起作用

如何将div #gallery设置在div #warp的中间？这是一个demo 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; 
}

来源

2012-07-15 yossi

你并不需要包括position: absolute到中心#gallery。这将通过margin: 10px auto已经实现。

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

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

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

注：我也注意到，有你的HTML和CSS的一些bug。

你需要body和html之间的逗号在样式表
的一行制作列表时
最后你应该使用<ul>或<ol>标签，不要忘记关闭<li>六线

来源

2012-07-15 16:50:50 JSW189

我不知道你想什么，在这里实现 - position: absolute在#gallery正是造成问题（这就是为什么margin: 10px auto不工作）。如果将其删除，#gallery元素将位于中心。

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

来源

2012-07-15 16:51:17 Ana

肯定的，但**'高度：70％;'**不工作 – yossi 2012-07-15 16:54:33

我不认为它可以工作。在这种情况下，'height：70％'意味着'＃warp'元素的高度的70％，其高度没有明确指定=>它是基于其相对子元素的高度计算的，'＃gallery'是其中之一他们。 – Ana 2012-07-15 17:02:21

由于要指定画廊宽度的百分比，为什么你不尝试设置左右边距的百分比？

margin: 10px 10%;

地方部门在中心

来源

2012-07-15 16:57:16

位置绝对不起作用

回答

相关问题