响应div的浮动和集中

Question

现在我把浮动：留在我的绿色div上，但这使得它们坚持到左边（有意义）。现在，当我调整蓝色容器的大小时，如何让div保持居中？

如下图所示：

蓝色：父容器 绿色：Divs

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/

Answer 2

使用

display: inline-block;
text-align: center;

而不是

float: left;