CODEWITHSUNDEEP
jquerycssjquery-masonry
MeltingDog
MeltingDog

Reputation: 15404

How to center Masonry Items?

I have set up masonry to display items as such:

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

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.

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?

Upvotes: 13

Views: 11426

Answers (2)

Michalis
Michalis

Reputation: 1

Coming a little bit late but, if you are using version 3.x instead of fitWidth:true use isFitWidth:true

Upvotes: 0

ralph.m
ralph.m

Reputation: 14345

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
});

and

#list {
  margin: 0 auto;
}

Upvotes: 22

Related Questions