How to get tiles centered and left-justified at the same time

Question

I have a container of tiles (or divs) and I want the container to be centered, while the tiles are left justified in the container.

so if the window is small:

<

Answer 1

What about this?

http://jsfiddle.net/cHTVd/1/

You have to set display: inline-block for the container too:

body { text-align: center; }

#container { 
    width: 250px; 
    border: solid green 3px; 
    display: inline-block; 
    text-align: left; 
}

.tile { width: 100px; 
    border: solid red 3px;
    display: inline-block;
    margin: 8px;
}

EDIT: Giving container relative width is easy - http://jsfiddle.net/cHTVd/3/

I am afraid that "reverse justify" would have to be done with JS. CSS text-align has only four values: left | right | center | justify. It's trivial to change it to justify - http://jsfiddle.net/cHTVd/4/. For the "reverse justify" you would probably need some javascript work similar to this: http://jsfiddle.net/yjcr7/2/.