Как отцентровать группу резиновых блоков внутри резинового контейнера, если кол-во внутр.блоков может меняться в зависимости от ширины контейнера?

Question

[Андрей Федоров]

Вот пример:
codepen.io/aliencash/pen/zrzJwo
Попробуйте поменять ширину окна результата и поймете в чем дело. Внутренние блоки (зеленые) прижатые влево выглядят некрасиво. Нужно чтобы были по центру контейнера (розового).
Если можно БЕЗ flex...

PS: Сам решил, вот так должно быть:
codepen.io/aliencash/pen/yeXRXo
Спасибо Денис Инешин, натолкнул на мысль почему не срабатывает text-align

Comments

[Donald Dak]

Вам нужно что бы менялось ширина вн. блоков?

[Aleksandr]

Не понял, что конкретно нужно

[Donald Dak]

Александр Котов: как я понял что при изменении ширины экрана вн. блоки пропорционально меняли свою ширину в зависимости от ширины контейнера

[Donald Dak]

в примере показана 7 блоков, их столько и будет? или не зависит сколько будет блоков?

[Андрей Федоров]

Don_Donald: Это не имеет значения... Главное, чтобы на широких экранах, где влезает большее число блоков их было показано больше, а на узких где места недостаточно их было меньше. Мой пример работает, только мне нужно, чтобы внутри контейнера группа блоков располагалась по центру...

[Андрей Федоров]

Александр Котов: Откройте пример. В вашем браузере будет отображено несколько зеленых блоков. Если вы уменьшите ширину окна брайзера количество зеленых блоков уменьшится. Это правильная работа кода, так и должно быть. Однако обратите внимание, зеленые блоки прижаты к левой стороне контейнера. А мне нужно, чтобы они были по центру.

[Donald Dak]

Андрей Федоров: Ну вот как в моем примере они по центру container-а

Answer 1

[Денис Инешин]

Увы так сделать нельзя на CSS.
Если бы блоков было поменьше и они бы занимали не все пространство, то решение очевидно. Text-align: center для их контейнера. Но у вас блоков гораздо больше, они выстроены в одну линию и прилично вылазят за пределы контейнера. Flex тут тоже не поможет. он просто умеет когда надо переносить блоки на новую строку.
По сути ни один блок не может быть шире своего контейнера, если вы не задали ему размер вручную шире.

Ну можно так схитрить: codepen.io/anon/pen/KVqGza

Еще нормальный вариант сделать это на JS:
1. Посчитать кол-во блоков
2. Посчитать их ширину
3. Сложить
4. Результат добавить в with контейнера
5. Контейнеру добавить отрицательный margin-left

Comments

[Donald Dak]

Как я понял, он так и хочет что бы блоки при уменьшении ширины экрана скрывались, только чтобы они главное были по центру контейнера

[Денис Инешин]

Don_Donald: ну я так и сделал. Суть в том что .container гораздо шире контента.

[Андрей Федоров]

Don_Donald: Я понял о чем Денис. Text-align работает, но у меня ширина контента больше контейнера получается, поэтому эффекта нет.

[Денис Инешин]

Андрей Федоров: Так сделайте контейнер супер большим, как в моем примере.

[Денис Инешин]

Его же все равно не видно, а контент центрируется.

Answer 2

[Donald Dak]

Вот такой пример подойдет?
codepen.io/anon/pen/RrgePO

Comments

[Андрей Федоров]

Нет, потому что контент, который будет в зеленых блоках нельзя уменьшать по ширине бесконечно. Их ширина должна быть не менее 150px. Если пользователь смотрит с мобильного (ширина 320px), мы показываем максимум 2 блока. Но вопрос не в этом. Мне нужно отцентрировать зеленые блоки, так, чтобы они располагались по центру розового, не зависимо от их количества. Что-то вроже text-align: center для розового контейнера или justify-content: center, если бы можно было flexbox использовать.