How to center perfect masonry? (isotope)

Question

Using isotope with the extension of perfectMasonry by zonear

So far it looks like it is working well, all I am wondering is if anyone knows how to center the container. Tried with css with no luck. Original isotope has centered masonry

Anyone? Thanks

>> UPDATE <<

new isotope (v2) is out and it does the "perfect masonry" bit with a layoutmode called packery. Also the new isotope version does center masonry/isotope. But I don't actually use fitWidth as I simply use bootstrap and isotope applied on top to get centered masonry at layout start (not centering once filtered tho, for that use fitWidth)

Answer 1

Nice to hear that you found the extension. :) Currently the only way to get it centered is to have a specific width on the container. Of course, if you want your design to be responsive (why wouldn't you) this, as a pure CSS solution, is not viable.

For responsive layouts you need to do it "by hand" - Bind a resize trigger to the window and on every resize, calculate how wide the container would need to be (knowing your tile widths). I will bake this capability into the extension at some point when I get the time. Hope this helps. :)

---

Edit: The perfectMasonry now supports centering the layout by pure CSS, as it now gets width specified. So, simple margin auto for the container CSS should do the trick. Like so.

#container {
    margin: auto;
}