在动态变化的高度上动态对齐另一个div内的中心div

Question

我无法找到问题的解决方案，所以我向你寻求帮助......我有1个div，根据浏览器窗口高度改变其高度。在这个div里面是另外5个每行4个div，当我调整窗口大小到较小的大小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; .mosaic-block，您可能需要尝试display:inline-block;并将text-align:center;添加到您的主广告。它有点脏，但它有效！

PS。您可能想删除max width: 840px;，我怀疑这是一个有效的声明！

Answer 2

添加CSS #Main

overflow:auto;