如何对齐父代中心的所有左浮动元素？

Question

.main-container{width:100%;height:auto;padding:0px;background-color:#FF0000;} 
 
.sub-container{width:50%;height:auto;padding:10px;box-sizing:border-box;margin:0px;background-color:#00FF00;float:left;text-align:center;margin-top:10px;} 
 
.child{width:100px;height:30px;line-height:30px;text-align:center;border-radius:2px;background-color:#FFFF00;float:left;margin:2px;}

<div class="main-container"> 
 
    <div class="sub-container"> 
 
    <div class="child"> 
 
     First 
 
    </div> 
 
    <div class="child"> 
 
     Second 
 
    </div> 
 
    <div class="child"> 
 
     Third 
 
    </div> 
 
    <div class="child"> 
 
     Fourth 
 
    </div> 
 
    </div> 
 
</div>

我要对齐的.sub-container在中心的内容，而无需对.child使用属性display: inline-block;。

Answer 1

在这里看到：jsfiddle

编辑：使用display:flex与justify-content:center在.sub-container和display:inline-block到.child

或者你可以使用上.childfloat:left，它仍然有效。但我建议，当你想中心未便您不使用浮动

代码：

.child 
{ 
width: 50px; 
height: 30px; 
text-align: center; 
border-radius: 10px; 
background-color: #FFFF00; 
display:inline-block; 
} 

.sub-container 
{ 
width: 50%; 
height: auto; 
padding: 10px; 
box-sizing: border-box; 
margin: 0px auto; 
background-color: #00FF00; 
float: left; 
text-align: center; 
position:relative; 
display: flex; 
justify-content: center; 
} 

让我知道，如果这是你要找的

Answer 2

什么添加到.main-container { margin: 0 auto; display: table; }和删除width:100%;

Answer 3

也许这可以帮到你： 添加保证金50％ - 容器宽度的一半。只是一个免责声明：这在某些浏览器中不受支持。

.child 
{ 
width: 100px; 
height: 30px; 
margin-left: calc(50% - 50px); 
text-align: center; 
border-radius: 10px; 
background-color: #FFFF00; 
float: left; 
}