有没有办法将浮动元素对齐在中心

Question

你可以看到第五个盒子后面有一个额外的空间。有没有办法将它对齐在中心？

请注意，这些方框可以是任何编号。

更新

这是jsfiddle链接 http://jsfiddle.net/esy2hgLm/

我正在尝试使用display: flex获得相同的动态宽度

Answer 1

你可以使用一些flexbox魔术而不是浮动：

.wrapper {
  display: flex;           /* Magic begins */
  flex-wrap: wrap;         /* Multiline */
  justify-content: center; /* Center items */
}

＆＃13;

＆＃13;

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.box {
  width: 100px;
  height: 100px;
  background: seagreen;
  margin: 20px;
  float: left;
}

＆＃13;

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试将此添加到您的CSS：

.wrapper {
  width: 700px;
  margin: 0 auto
}

请注意，这需要包装器具有固定的宽度（这意味着如果盒子的数量发生变化，它将不是理想的。）

我建议看看Flexbox的中心元素。这里有几篇你应该阅读的文章：

• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• http://caniuse.com/#feat=flexbox

请注意缺少对＆lt; IE9

这是看起来的样子：

.wrapper {
  display: flex;           
  flex-wrap: wrap;         
  justify-content: center; 
}

Answer 3

您必须对齐包装器，而不是项目。确保包装器不比内容宽，并将margin: 0 auto;添加到包装器CSS，后者应将其置于其父级中心。

Answer 4

您可以margin使用0 auto。

试试这个：

.wrapper {
width: 600px;
margin: 0 auto;
display: block;
}