I have seen 4 similar questions, but none of them were properly asked to fully explain the situation, and none of them provided answers to this particular predicament, which has me bashing my head against the wall.
It's simple really, I just have a bunch of same-size blocks set to display:inline-block inside a div that has text-align:center set to align the blocks.
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 sitting flush to the left, like so.
What currently happens is this:
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 must always remain centered no matter how many columns.
Here is a pen to better demonstrate:
http://codepen.io/anon/pen/IDsxn
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 reeeeally like a pure CSS solution, but if you tell me JS is the only way, I'd love to see that in action.
For reference - similar questions, though none were thoroughly explained:
How to align left last row/line in multiple line flexbox
CSS - Left align the last row of images in a centered div
Fix centering last line of elements in fluid container grid to be left aligned while container stays centered
Center multiple inline blocks with CSS and align the last row to the left