如何使物品在同位素容器内居中？

Question

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

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

css无法使项目居中。here是指向说明我问题的小提琴的链接。

怎样才能使红色方块在黑盒内居中？

Answer 1

最简单的方法是使用masonry：

jsFiddle

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

Answer 2

使用masonry并在网格中自动添加边距0。

js：

 masonry: {
  columnWidth: 100,
  fitWidth: true
}

css：

 .grid {
      margin: 0 auto;
  }

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>

​