如何居中砌筑物品? [英] How to center Masonry Items?

问题描述

我已经设置了砌体来显示以下物品:

I have set up masonry to display items as such:

$('#list').masonry({
  itemSelector: '.propitem',
  columnWidth: 230
});

这可行，但是所有项目(.propitem)都向左浮动.例如，如果我的容器#list的宽度为600px，则左侧将有两列，但在其右侧将有一个剩余的140px的间隙.我想将两列居中，两边各有一个70px的边距".

This works, but all items (.propitem) float to the left. For example if my container #list is 600px wide there will be two columns to the left but a gap to the right of them where the remaining 140px is. I would like to center the 2 columns with a 70px 'margin' on either side.

我尝试使用css将它们居中，但是没有运气，例如:

I have tried using css to centre these, but had no luck, eg:

#list {
text-align: center;
}

有人会知道实现这一目标的正确方法吗?

Would anyone know the correct way of achieving this?

推荐答案

您需要将fitWidth(或者在较早的版本中为isFitWidth)与CSS结合使用才能使其正常工作.参考如下: http://masonry.desandro.com/options.html#isfitwidth

You need to use fitWidth (or, in older versions, isFitWidth) along with CSS to make it work. Here's the reference: http://masonry.desandro.com/options.html#isfitwidth

$('#list').masonry({
  itemSelector: '.propitem',
  columnWidth: 230,
  fitWidth: true
});

和

#list {
  margin: 0 auto;
}

这篇关于如何居中砌筑物品?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！