如何对齐浮动元素？

Question

我有一个包装盒，里面有一系列以盒子形式存在的div。 以下是我所面临的一些问题 当我调整窗口大小时，元素似乎是左对齐的。我如何集中对齐它们。

另外，另一个问题是div的大小略有不同，这使它们错位。

Here is the Fiddle

.left_wrapper       
{            
    max-width: 70%;
    margin:0 auto;
    float:left;
}


.boxa
    {
    background-color: #45e645;
    display:inline;
    position:relative;
    left:4%;
    float:left;
    margin: 1% 1%;
    padding:1%;
    font-size: 85px;
    text-align:center;
    border:1px solid green;

}




<div class="left_wrapper" id="roll_nos">
    <div id="box" class="boxa">01</div>
    <div id="box" class="boxa">02</div>
    <div id="box" class="boxa">03</div>
    <div id="box" class="boxa">04</div>
     .............
     .............
     .............
     .............

</div>

正如所建议的那样，问题不是上述问题的重复，尽管问题（仅）与那里提出的问题类似。

在我的情况下，接受且最受欢迎的答案不适用，因为我希望在调整窗口大小时元素自动移动到下一行。  感谢＆＃39; @Niet the Dark Absol＆＃39;，柔性包装解决方案正在努力使元素居中对齐，但仍有轻微的错位，＃13附近的红线突出显示它。

Answer 1

对于你的变化div大小“red line aligment”我建议添加：

.boxa { 
    min-width: 85px;
}

Answer 2

在没有float:left代码的情况下使用此代码我在PC和浏览器中找到了正确的结果！

.left_wrapper       
  {            
    max-width: 70%;
    margin:0 auto;
 }