How to center Masonry Items?

Question

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?

Ruddie

you cannot center floated items. – Patroclus

add padding instead margin, or reduce width of container (padding:0 70px; ?) – Berglund

Answer 1

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

Catechin

O well, it certainly used to. :-( – Catechin

Works well with version 4.1.x – Lingo