如何將左浮動元素居中？

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;
   }