Не получается позиционировать контейнер по центру с блоками masonry. Чё делать?

Question

[nluparev]

Привет.

Учусь работать с masonry masonry.desandro.com
делаю вот такую страницку для своего образования codepen.io/SuperManEver/full/mJXvrj , не получаеться расположить контейнер по-центру.
Подскажите как это можно решить.

Спасибо

Comments

[Сергей]

Ширина 20% задана?

[Сергей]

у box задать ширину, чтобы на весь див растягивался, либо у родительского дива делать ширину по блокам и его по центре ровнять

Answer 1

[Дмитрий Клусевич]

Чистым css, не получится. Masonry динамически высчитывает позиции элементов, при этом они позиционированы абсолютно. А, чтобы центрировать родительский контейнер, его ширина должна быть отличной от 100% и равняться сумме ширин элементов в строке(с определением строки могут возникнуть проблемы, они не явны, условны) с отступами и полями. Тут придется велосипед на js писать. Правда есть много "но".
Алгоритм может быть таков:
-Определяем количество элементов в так называемой строке(самое сложное).
-Вычисляем ширину элементов
-Вычисляем сумму ширин элементов, это будет ширина родителя
-Динамически подставляем ширину родительского контейнера(в css его свойство margin:0 auto).

Comments

[nluparev]

спасибо за такую подробную инструкцию что надо делать :)

[nluparev]

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

[Дмитрий Клусевич]

Сайт адаптивный, как я понимаю. можно ручками попробовать задавать отступы по ключевым точкам "переломам", но это не true

Answer 2

[nofuture trustnoone]

Нельзя центрировать, если враппер шириной во весь экран. Уменьшить до 90% например и тогда выравнивать боксы внутри

Comments

[Дмитрий Клусевич]

Вроде, по условием резина на весь экран..

[nofuture trustnoone]

Дмитрий Клусевич: тогда во врапере впихнуть еще один див и внутрь пихать боксы

[Дмитрий Клусевич]

Масонри коварна. Вообще то можно попробовать в относительных величинах задать ширину элементов и отступов.