如何将物品居中放置在同位素容器内？

Question

我有一个非固定宽度的同位素网格，我不知道如何将项目居中在同位素容器内。

.box{
width: 40px;
height: 40px;
background-color: #e74c3c;
margin: 0 auto;
}

css不能将项目居中。 这里 是演示问题的fiddle链接。

我如何让红色正方形在黑色框内居中？

- Anfa A

Answer 1

最简单的方法是使用masonry:

jsFiddle

var $container = $('#container');
// init
$container.isotope({
// options
itemSelector: '.box',
masonry: {
columnWidth: 40,
isFitWidth: true
}
});

- Macsupport

---

我更喜欢你的解决方案。唯一的注意事项是OP的#container宽度不固定。他在问题中指明了这一点。 - ivan.sim

@macsupport，它们没有居中对齐。如果添加第二行，它们会向左浮动，这不是居中对齐。 - justme

Answer 2

使用瀑布流布局，并将margin设为0 auto以使网格居中显示。

JavaScript代码：

 masonry: {
  columnWidth: 100,
  fitWidth: true
}

CSS：

 .grid {
      margin: 0 auto;
  }

- achraf arrami

---

请问您能否编辑您的答案，更详细地说明如何实现这个功能。至少对我来说，不清楚如何将您的答案应用到问题中的fiddle上。此外，提供一些关于masonry是什么的参考链接可能有助于其他读者。 - Superole

Answer 3

看起来你的每个盒子都被赋予了 absolute 定位，就像这样：

<div class="box" style="position: absolute; left: 0px; top: 0px;"></div>
<div class="box" style="position: absolute; left: 80px; top: 0px;"></div>
<div class="box" style="position: absolute; left: 160px; top: 0px;"></div>
<div class="box" style="position: absolute; left: 240px; top: 0px;"></div>

我让它正常工作的方法是将所有的盒子都包裹在另一个 div 容器中，并像这样操作该新容器的 relative 定位（或查看此 fiddle）：

var $container = $('#container');
// init
$container.isotope({
  // options
  itemSelector: '.box',
  layoutMode: 'fitRows'
});

#container {
  background-color: #333;
  width: 90%;
  height: auto;
  margin: 0 auto;
  position: relative;
}

#boxes-collection {
  position: absolute;
  left: 28%;
  width: 100%;
}

.box {
  width: 40px;
  height: 40px;
  background-color: #e74c3c;
  margin: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://squaredoodletest.t15.org/JS/isotpoe.js"></script>
<div id="container">
  <div id="boxes-collection">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

- ivan.sim

---

这似乎与同位素所做的相反，因为同位素是设置绝对定位的。 - Macsupport