响应式 div 的浮动和居中

Question

现在我已经将 float:left 放在我的绿色 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;

响应式 div 的浮动和居中

Responsive div's floating and centered

html

css

centering