Centering the items within the container div

[metafizzy]

Centering the items within the container div

[desandro]

Here's the solution we ended up going with:

http://jsfiddle.net/desandro/P6JGY/24/

With this one, the container width shrinks if not enough items can fill the width of the body. If you remove items to 4 or 2, they remain centered.

The JS is fairly basic for this demo, so you probably won't be able to copy/paste this right into your own application. And it's not hooked in to Isotope's filtering mechanism. But hopefully its a step in the right direction.

[theskinny]

Update: I've tried to replicate the layout of 'ish.tv' using their own code, with no success.

[desandro]

Maybe I'm not understanding correctly - What's wrong with using the centered container? It centers the items. If you need another container, just wrap it in another containing element.

[theskinny]

Thanks for your reply.
I was hoping that in my fiddle file you could see that the container is centered and the items are still aligned left. For instance, if you filtered down to a few items they would not be centered, there would be unequally large space on the left.

Also, I tried putting a div between the container and the items, which caused masonry to break.

[theskinny]

http://ScrnSht.com/ajjozy
I uploaded a quick screenshot from the fiddle. You can see that the five items are aligned to the left and not centered. This is the same problem i'm having with my actual gallery.

[desandro]

Okay, I see now. The issue was that when there are not enough items to fill the container, it appears that they are left-aligned. We can resolve this by ensuring that the container does not too large and leave an empty space

currentColumns = Math.min( currentColumns, 6 );

See http://jsfiddle.net/desandro/yv7m3/1/

[mariodermez]

@desandro even with your code it doesnt center. Centering means equal space from the sides per row of elements. That means that in suggested code if I use two rows of boxes (equal height) with less in the second row then they will just float to the left. They won't be centered.

So how can someonw do a layout like the image below?