css - 使用动态变化的高度动态对齐另一个 div 内的中心 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

对于 .mosaic-block，您可能想尝试 display:inline-block; 并添加 text-align:center，而不是 float:left; ; 到你的主。它有点脏，但它有效!

附言。你可能想删除那个 max width: 840px; ，我怀疑它是一个有效的声明!