如何将左浮动元素居中？

Question

我有一个各种宽度的容器，里面有不同数量的盒子。 所有盒子都有相同的width和height 。

这是一个示范。 https://jsfiddle.net/kghvmjb6/1/

如果可能的话，我正在寻找纯CSS解决方案。 否则纯javascript（没有jQuery）和CSS解决方案都可以。

这个例子适用于一行浮动框但是多行失败，这不是我想要的。 https://codepen.io/alexandredees/pen/ojaFr

Answer 1

而不是使用float left ，使用display inline-block并在父div添加text-align center ，这将使container的框居中

改良小提琴

HTML

<div class="container">
 <div class="">
   <div class="box">1</div>
   <div class="box">2</div>
   <div class="box">3</div>
   <div class="box">4</div>
   <div class="box">5</div>
   <div class="box">6</div>
   <div class="clear"></div>
 </div>
</div>

CSS

.container {
   border: 1px solid red;
   width: 480px; text-align:center;
 }

  .container.wider {
    width: 530px;
  }

 .box {
   float: none;
   width: 80px;
   height: 80px;
   margin: 10px;
   background-color: #ddd;
   display:inline-block;
   }