html - 响应式div的 float 和居中

Question

现在我已经将 float:left 放在我的绿色 div 上，但这使它们粘在左边(有道理)。现在，如何在调整蓝色容器大小时使 div 居中？

如图所示:

蓝色:父容器 绿色:分区

Answer 1

您可以在子元素上使用display: inline-block，在父元素上使用text-align: center

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

.container {
    background-color: blue;
    width:500px;
    text-align: center;
}

.item {
    display: inline-block;
    background-color: green;
    width: 100px;
    height: 100px;
}

https://jsfiddle.net/g3vp2fyf/