位置絕對不起作用

如何將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

位置絕對不起作用

回答

相關問題