title: Left aligned last row in centered grid of elements
body: <p>I have a bunch of same-size blocks set to <code>display:inline-block</code> inside a div that has <code>text-align:center</code> set to align the blocks. </p>
  
  <pre><code>|        _____   _____   _____   _____       |
  |       |     | |     | |     | |     |      |
  |       |  1  | |  2  | |  3  | |  4  |      |
  |       |_____| |_____| |_____| |_____|      |
  |        _____   _____   _____   _____       |
  |       |     | |     | |     | |     |      |
  |       |  5  | |  6  | |  7  | |  8  |      |
  |       |_____| |_____| |_____| |_____|      |
  |                                            |
  </code></pre>
  
  <p>The blocks fill the div horizontally, and as the browser window shrinks, some blocks break to new lines, creating more rows and less columns. I want everything to still remain centered, with the last row aligned flush to the left, like this :        </p>
  
  <pre><code>|        _____   _____   _____        |
  |       |     | |     | |     |       |
  |       |  1  | |  2  | |  3  |       |
  |       |_____| |_____| |_____|       |
  |        _____   _____   _____        |
  |       |     | |     | |     |       |
  |       |  4  | |  5  | |  6  |       |
  |       |_____| |_____| |_____|       |
  |        _____   _____                |
  |       |     | |     |               |
  |       |  7  | |  8  |               |
  |       |_____| |_____|               |
  |                                     |
  </code></pre>
  
  <p>What currently happens is this:</p>
  
  <pre><code>|        _____   _____   _____        |
  |       |     | |     | |     |       |
  |       |  1  | |  2  | |  3  |       |
  |       |_____| |_____| |_____|       |
  |        _____   _____   _____        |
  |       |     | |     | |     |       |
  |       |  4  | |  5  | |  6  |       |
  |       |_____| |_____| |_____|       |
  |            _____   _____            |
  |           |     | |     |           |
  |           |  7  | |  8  |           |
  |           |_____| |_____|           |
  |                                     |
  </code></pre>
  
  <p>I cannot add extra filler divs like one suggestion, because there could be any number of blocks, and the amount of rows and columns will vary depending on browser width. I also cannot style block #7 directly, for the same reason. The blocks <em>must always remain centered</em> no matter how many columns. </p>
  
  <p>Here is a pen to better demonstrate:</p>
  
  <p><a href="http://codepen.io/anon/pen/IDsxn" rel="noreferrer">http://codepen.io/anon/pen/IDsxn</a></p>
  
  <p>Is this possible? I feel like it sure should be. I would prefer not to use flexbox as it is only ie10+, and I'd like ie9+. I would really like a pure CSS solution, but if you tell me JS is the only way, I'd love to see that in action.</p>
  
  <p>For reference - similar questions, though none were thoroughly explained:</p>
  
  <p><a href="https://stackoverflow.com/questions/16377972/how-to-align-left-last-row-line-in-multiple-line-flexbox">How to align left last row/line in multiple line flexbox</a></p>
  
  <p><a href="https://stackoverflow.com/questions/12119978/css-left-align-the-last-row-of-images-in-a-centered-div">CSS - Left align the last row of images in a centered div</a></p>
  
  <p><a href="https://stackoverflow.com/questions/12503497/fix-centering-last-line-of-elements-in-fluid-container-grid-to-be-left-aligned-w">Fix centering last line of elements in fluid container grid to be left aligned while container stays centered</a></p>
  
  <p><a href="https://stackoverflow.com/questions/16375009/center-multiple-inline-blocks-with-css-and-align-the-last-row-to-the-left">Center multiple inline blocks with CSS and align the last row to the left</a></p>