jquery - Masonry - 如何阻止 Masonry 将我所有的网格元素向左浮动？

Question

如何证明 masonry 网格元素居中？

似乎 Masonry 将我所有的网格项都 float 到左侧或将内容对齐到左侧:

 <div class="wrap">
  <div class="parent grid">
    <div class="grid-item"><div>1</div></div>
    <div class="grid-item"><div>2</div></div>
    <div class="grid-item"><div>3</div></div>
    <div class="grid-item"><div>4</div></div>
    <div class="grid-item"><div>5</div></div>
  </div>
</div>

CSS:

* {
    box-sizing: border-box;
    font-family: Arial, Sans-serif;
}

.wrap {
    background: #FFD54F;
    text-align: center;
}

.parent {
    text-align: center;
    width: 600px;
    display: inline-block;
    border: 1px solid black;
}

.parent > div {
    width: 200px;
    height: 100px;
    background: white;
    margin:5px;
    padding:20px;
    display: inline-block;
}

.parent > div > div {
    font: bold 30px Arial, Sans-serif;
    color: white;
    width: 50px;
    height: 50px;
    background: #FAB400;
    border-radius: 50%;
    padding: 9px;
    text-align:center;
}

jsfiddle

我想要实现的是:

这可能吗？

Answer 1

您可以将另一个容器添加到 .parent 并将其宽度设置为恰好包括边距在内的子元素的大小，并将其显示在中心。检查一下:

.parent {
    text-align: center;
    width: 60%;
    display: inline-block;

}
.parent-parent{
  width: 60%;
  border: 1px solid black;
  margin: 0 auto;
} 

Sample