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

I solved this on my own projects in a quick and dirty manner by simply adding several empty "tiles" to the end that are the same width as the regular content tiles, but with a negligible height. These empty tiles serve to "push" the content tiles on the last line to the left where they belong. (The "real" last line often consists of nothing but empty tiles that are invisible to the user.) So, for example, if there some number of tiles on a page, and I expect the width of the browser to be able to accommodate from 1 to 4 (for example) tiles in width, I will add 3 extra empty tiles (designated "e") to the end:

..[s][s][s]..
..[s][s][e]..
...[e][e]....  // this row isn't visible because [e] has no content

If the window is widened a little:

...[s][s][s]...
...[s][s][e]...
....[e][e].....

further:

.[s][s][s][s].
.[s][e][e][e].

or more narrow:

.[s][s].
.[s][s].
.[s][e].
.[e][e].

or really narrow

..[s]..
..[s]..
..[s]..
..[s]..
..[s]..
..[e]..
..[e]..
..[e]..

The empty tiles may pile up at the bottom, but since they are some small height, they don't create a whole lot of extra whitespace.

A hackish solution for sure, but it does work, is reliable on different browsers, and doesn't require a mound of code.