如何证明 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;
}
我想要实现的是:
这可能吗?
最佳答案
您可以将另一个容器添加到 .parent
并将其宽度设置为恰好包括边距在内的子元素的大小,并将其显示在中心。检查一下:
.parent {
text-align: center;
width: 60%;
display: inline-block;
}
.parent-parent{
width: 60%;
border: 1px solid black;
margin: 0 auto;
}
关于jquery - Masonry - 如何阻止 Masonry 将我所有的网格元素向左浮动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41116479/