响应式 div 的浮动和居中答案

【问题标题】：Responsive div's floating and centered响应式 div 的浮动和居中
【发布时间】：2015-06-29 06:39:02
【问题描述】：

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

如图所示：

蓝色：父容器绿色：Divs

【问题讨论】：

使用 inline-block 或 inline-table 代替 float 和 text-align on parent ...
发布您的代码，甚至可以做一个小提琴。 P.S.：蓝色：父容器绿色：Divs——你不要说。

标签： html css centering

【解决方案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/

【讨论】：

【解决方案2】：

使用

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

而不是

float: left;

【讨论】：