Выровненный по левому краю последний ряд в центрированной сетке элементов
У меня есть куча блоков одинакового размера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 и выровняйте последний ряд по левому краю