Альтернатива для width: fit-content для списков встроенных блоков с несколькими строками?

Question

Я пытаюсь сделать список миниатюр переменной величины центрированным, пока миниатюры все вписываются в одну строку, а затем последующие строки выравниваются по левому краю, в то время как родительский элемент реагирует по центру на странице. width:fit-content хорошо работает для одной строки, но когда есть несколько строк, он идет до 100% ширины (в любом случае, в mac chrome). Иллюстрация проблемы:

http://codepen.io/scotthorn/pen/eutAH?editors=110

Если есть другой способ достичь своей желаемой цели, я был бы не против изменения какой-либо части CSS или HTML-разметки. Фон, который подходит для этой области, не нужен, только в моем примере лучше показать, что происходит. Моя основная цель состоит в том, чтобы иметь список, который ведет себя как центрированный контейнер элементов встроенного блока для одной строки, но затем, когда нужно создать вторую строку, первый элемент в нем выстраивается под первым элементом первой строки а не быть сосредоточенным сами по себе.

Надеюсь, это имеет смысл, если нет, я могу сделать макет.

Answer 1

Я бы предположил, что обернуть все это в div и центрировать, что с шириной% сделает то, что вы хотите. Но макет поможет мне понять.

Или вы можете использовать поля, чтобы проглотить содержимое внутри.

Answer 2

Ваш пример работает хорошо, за исключением того, вы, вероятно, хотите добавить макс-ширина к вашему UL ..

Например, если вы хотите иметь максимально 7 элементов в каждой строке, в вашем случае, вы бы добавить:

ul { max-width:630px} 

updated codepen

удачи =)