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

中心

Modified Fiddle

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

如何将左浮动元素居中？

1 个答案: