У меня есть куча блоков одинакового размераdisplay:inline-block внутри div, который имеетtext-align:center установить для выравнивания блоков.

|        _____   _____   _____   _____       |
|       |     | |     | |     | |     |      |
|       |  1  | |  2  | |  3  | |  4  |      |
|       |_____| |_____| |_____| |_____|      |
|        _____   _____   _____   _____       |
|       |     | |     | |     | |     |      |
|       |  5  | |  6  | |  7  | |  8  |      |
|       |_____| |_____| |_____| |_____|      |
|                                            |

Блоки заполняют div по горизонтали, и когда окно браузера сжимается, некоторые блоки переходят на новые строки, создавая больше строк и меньше столбцов. Я хочу, чтобы все оставалось по центру, чтобы последний ряд был выровнен по левому краю, например так:

|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  1  | |  2  | |  3  |       |
|       |_____| |_____| |_____|       |
|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  4  | |  5  | |  6  |       |
|       |_____| |_____| |_____|       |
|        _____   _____                |
|       |     | |     |               |
|       |  7  | |  8  |               |
|       |_____| |_____|               |
|                                     |

Что в настоящее время происходит, это:

|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  1  | |  2  | |  3  |       |
|       |_____| |_____| |_____|       |
|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  4  | |  5  | |  6  |       |
|       |_____| |_____| |_____|       |
|            _____   _____            |
|           |     | |     |           |
|           |  7  | |  8  |           |
|           |_____| |_____|           |
|                                     |

Я не могу добавить дополнительные заполнители div, как одно предложение, потому что может быть любое количество блоков, а количество строк и столбцов будет варьироваться в зависимости от ширины браузера. Я также не могу стилизовать блок № 7 напрямую по той же причине. Блокивсегда должен оставаться в центре независимо от того, сколько столбцов.

Вот ручка, чтобы лучше продемонстрировать:

http://codepen.io/anon/pen/IDsxn

Это возможно? Я чувствую, что так и должно быть. Я бы предпочел не использовать flexbox, так как это только ie10 +, и ямне нравится ie9 +. Мне бы очень хотелось чисто CSS-решение, но если вы скажете мне, что JS - единственный путь, яЯ хотел бы увидеть это в действии.

Для справки - похожие вопросы, хотя ни один из них не был подробно объяснен:

Как выровнять левую последнюю строку / строку в многострочном flexbox

CSS - выравнивание по левому краю последнего ряда изображений по центру

Исправьте центрирование последней линии элементов в сетке контейнера для жидкости, чтобы она была выровнена по левому краю, пока контейнер остается в центре

Центрируйте несколько встроенных блоков с помощью CSS и выровняйте последний ряд по левому краю