Always center thumbnails in gallery

Question

Here's a quick fiddle I made on topic: http://jsfiddle.net/Z67p4/

So, my question is - if the content is generated dynamically in the future, how do I make thumbnails always centered in the gallery? Even if there are less than four thumbnails in a row they should also be centered but also should have a gutter in between them.

I tried fiddling with margin: auto but I can't figure it out.

Enigmadan · Accepted Answer

Two fixes:

Fix One:

Add text-align:center; to the container class

Fix Two:

Get rid of display:inline-block; in the container class. It is causing your container class to be displayed inline (like text) which left justifies it.

To show this, I put a bg-color on the container class and made it 60% of the screen keeping your original margins. As you can see, despite having an 'auto' horizontal margin, the div is covering 60% of the screen beginning from the left edge.

Three recommendations:

Recommendation One:

Remember to add text-align:left; if you don't want the text in your thumbnails to be centered. text-align affects all children of the targeted element meaning every child of a div with the container class will be centered.

Recommendation Two:

Really more of a pet peeve...

Try to find a way to define the size of your content elements (thumbnails) without using percentages. Your page will be able to scale to different screens through your use of different, carefully-sized elements that will center themselves based on the viewing size. Having elements center and scale may be overkill.

Recommendation Three:

Add a minimum width for your container. This way you won't have to worry about whether your elements could possibly overflow because of a percentage based container.

Here is a version combing the fixes as well as my recommendations. I have commented each change I made.