У меня есть набор одинаковых блоков, которые будут 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 | |
| |_____| |_____| |
| |
Я не могу добавить дополнительные разделители-заполнители, как одно предложение, потому что может быть любое количество блоков, а количество строк и столбцов будет варьироваться в зависимости от ширины браузера. Я также не могу настроить блок № 7 по той же причине. Блоки должны всегда оставаться центрированными независимо от того, сколько столбцов.
Вот ручка, чтобы лучше продемонстрировать:
http://codepen.io/anon/pen/IDsxn
Это возможно? Я чувствую, что это точно. Я бы предпочел не использовать flexbox, поскольку это только ie10+, и я хотел бы ie9+. Мне бы очень понравилось чистое решение для CSS, но если вы скажете мне, что JS - единственный способ, мне бы хотелось увидеть это в действии.
Для справки - аналогичные вопросы, хотя ни один из них не был подробно объяснен:
Как выровнять левую последнюю строку/строку в нескольких линиях flexbox
CSS. Слева выровняйте последнюю строку изображений в центрированном div
Центрируйте несколько встроенных блоков с помощью CSS и выровняйте последнюю строку влево