我必须将 div 水平居中。 cont1
div 是父 div 。它将占用设备的宽度。 cont2
是子 div,它将根据其内容获取宽度。
并且 child
div 的数量是动态的。所有的 div 都完美居中。但问题出在最后一个 div 上。我想要左侧的最后一个 div。我尝试了很多技术。
但无法解决这个问题。
我不想使用 javascript 或 jquery 。
这是 fiddle 链接 Fiddle link
这里是html
<div class="cont1">
<div class="cont2">
<div class="child"> </div>
<div class="child"> </div>
<div class="child"> </div>
<div class="child"> </div>
<div class="child"> </div>
<div class="child"> </div>
<div class="child"> </div>
<div class="child"> </div>
<div class="child"> </div>
<div class="child"> </div>
</div>
</div>
这里是CSS
.cont1 {
background-color: #e6e6e6;
height: auto;
margin: 0 auto;
min-width: 600px;
position: relative;
text-align: center;
width: 840px;
}
.cont2 {
display: inline;
text-align: left;
}
.child{
display: inline-block;
margin: 4px;
max-width: 230px;
width: 30%;
height:100px;
background-color:red;
}
最佳答案
CSS
.cont1 {
background-color: #e6e6e6;
height: auto;
margin: 0 auto;
min-width: 600px;
position: relative;
width: 840px;
text-align: left; /* make it left */
}
.cont2 {
/* display: inline; remove this */
max-width:600px; /* add this */
margin:auto; /* add this */
}
关于html - Center Child 动态 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27503685/