title: How to get tiles centered and left-justified at the same time
body: <p>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.</p>
  
  <p>so if the window is small:</p>
  
  <pre><code>..[s][s][s]..
  ..[s][s].....
  </code></pre>
  
  <p>If the window is widened a little:</p>
  
  <pre><code>...[s][s][s]...
  ...[s][s]......
  </code></pre>
  
  <p>further:</p>
  
  <pre><code>.[s][s][s][s].
  .[s]..........
  </code></pre>
  
  <p>I've tried:</p>
  
  <pre><code>#container's-parent: { display: block; text-align: center; }
  #parent: { display: inline-block; text-align: left; }
  .tiles: { display: inline-block }
  </code></pre>
  
  <p>but that doesn't appear to work.</p>
  
  <p>I want this to work in Chrome at least, but I also need to eventually support latest FF, Safari, and IE 10+</p>