響應div的浮動和居中

Question

現在我已經把float：留在我的綠色divs，但這使得他們堅持左（有道理）。現在，如何在調整藍色容器的大小時保持我的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/

Answer 2

使用

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

，而不是

float: left;