動態調整中心divs在另一個div內動態變化的高度

Question

我無法找到解決方案，我的問題，所以我問你的幫助...我有1個div根據瀏覽器窗口高度改變其高度。這個div裏面有5個div，每行4個，當我把窗口大小調整爲更小的div時，會在2,3行上掉下來。這很好，但是這些div並不在調整大小的主div的中間而這正是我要找...謝謝您

HTML：

<div id="main"> 

<!--Div1--> 
<div class="mosaic-block fade"> 
</div> 

<!--Div2--> 
<div class="mosaic-block fade"> 
</div> 

<!--Div3--> 
<div class="mosaic-block fade"> 
</div> 

<!--Div4--> 
<div class="mosaic-block fade"> 
</div> 

<!--Div5--> 
<div class="mosaic-block fade"> 
</div> 

</div> <!--main--> 

CSS：

div#main { 
border: #CCCCCC thin solid; 
max width: 840px; 
height:600px; 
min-width: 210px; 
border: #CCCCCC thin solid; 
margin:0 auto; 
max-width: 840px; 
} 

.mosaic-block { 
margin-bottom:50px; 
position: relative; 
float:left; 
margin:4px; 
top:50px; 

overflow:hidden; 
width:200px; 
height:200px; 
background:#111 url(../img/progress.gif) no-repeat center center; 
border:1px solid #fff; 
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5); 
} 

Answer 1

而不是float:left; for .mosaic-block，您可能需要嘗試display:inline-block;並將text-align:center;添加到main。這有點髒，但它的工作原理！

PS。你可能想刪除那個max width: 840px;，我懷疑這是一個有效的聲明！

Answer 2

添加在你的CSS #Main

overflow:auto;