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

Try this:

.tiles: { 
  display: inline-block;
  margin: 0 auto;
  max-width: 90%;
}

No verticall margin, auto margin for horizontal sides!

Answer 2

Looks like there is solution (though it is described in Russian and I haven't found a translation).
Demo can be seen here.

Answer 3

Unless you want to use Javascript you could use the media query (lots of them):

#parent{ width: 100px; margin: 0 auto;padding:0;}
.tile{width: 80px; float:left;padding:10px;outline:2px dashed red;}
@media screen and (max-width:200px)
@media screen and (min-width:201px) and (max-width:300px){
    #parent{ width: 200px;}
}
@media screen and (min-width:301px) and (max-width:400px){
    #parent{ width: 300px;}
}
@media screen and (min-width:401px){
    #parent{ width: 400px;}
}

The problem is that you need to know how many of the tiles fit into the container to set a tight fitting width to the container, but that is a bottom up information and not how cascading works. If you want a more elegant solution you need to use JS on resize events, calculate how many boxes fit into one line and set the width of the container.