Центрирование блоков в блоке

[Еврейская Мышь]

Здравствуйте. Сам не смог найти решение проблемы и решил обратиться за помощью. Суть проблемы в том, что есть блок с шириной 80% отцентрированный, а в нем маленькие артикли, процентов по 30 с отступами и эти самые артикли прижимаются к левой стороне, оставляя пустое место справа. Нужно отцентрировать артикли с отступами, чтобы равномерно разделилось пустое пространство. На фото наглядно суть проблемы, если выразился непонятно.

  Reveal hidden contents

 

section {
    width: 80%;
    margin: 0 auto;
}

article {
    display: inline-block;
    width: 30%;
    min-height: 400px;
    margin: 10px auto;
    padding: 1rem;
    line-height: 1.35;
    color: #000;
    background-color: rgba(246,142,86,.65);
    border-radius: 0.2rem;
}

 

[npofopr]

http://css-live.ru/articles/krasivoe-vyravnivanie-blokov-po-rezinovoj-setke.html

text-align: center;

Или пользуйтесь flexbox

[Еврейская Мышь]

  On 2/9/2018 at 11:13 AM, npofopr said:

http://css-live.ru/articles/krasivoe-vyravnivanie-blokov-po-rezinovoj-setke.html

text-align: center;

Или пользуйтесь flexbox

Expand  

Я не использую в данном проекте flexbox. Спасибо за отзывчивость.

Решил проблему добавлением классов left и right с соответствующими свойствами для float. А центральному блоку задал отступы с обеих сторон в %.  Получилось примерно следующее: 

  Reveal hidden contents

 

Прошу критики данного решения проблемы.

[npofopr]

  On 2/9/2018 at 11:22 AM, Еврейская Мышь said:

Решил проблему добавлением классов left и right с соответствующими свойствами для float. А центральному блоку задал отступы с обеих сторон в %.

Expand  

Если это чисто ваш проект, то ради бога. 

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

[Alarr]

Просто сделайте этим блокам float: left; и с помощью nth-child поставьте margin-right: 0; каждому третьему блоку. Ну и потом подгоните отступы между этими блоками. Немного топорненько тоже, но если вёрстка статичная, то норм.

Edited February 9, 2018 by Alarr

[Еврейская Мышь]

  On 2/9/2018 at 1:18 PM, Alarr said:

Просто сделайте этим блокам float: left; и с помощью nth-child поставьте margin-right: 0; каждому третьему блоку. Ну и потом подгоните отступы между этими блоками. Немного топорненько тоже, но если вёрстка статичная, то норм.

Expand  

Для статичной я решил проблему как описал выше, но дело в том, что вёрстка не совсем статичная. Верстаю для конкретного человека сайт с поздравлением. Как выяснилось, у нас большая разница в разрешениях 1920 и 1366. Придётся через медиа подгонять под конкретное разрешение. Ну и конечно-же я понимаю, что это весьма топорно.

Edited February 9, 2018 by Еврейская Мышь

[Alarr]

  On 2/9/2018 at 1:26 PM, Еврейская Мышь said:

Для статичной я решил проблему как описал выше, но дело в том, что вёрстка не совсем статичная. Верстаю для конкретного человека сайт с поздравлением. Как выяснилось, у нас большая разница в разрешениях 1920 и 1366. Придётся через медиа подгонять под конкретное разрешение. Ну и конечно-же я понимаю, что это весьма топорно.

Expand  

Ну, в медиаквери я ничего плохого не вижу. В некоторых дорогих вордпресс темах я видел стили чуть ли не с шагом ширины экрана в каждые 100 пикселей:)

[mrnobody]

Обидно, что вам не подходит flexbox. Вроде нормальная поддержка браузерами - https://caniuse.com/#feat=flexbox

[npofopr]

Я же дал ссылку на css-live, не занимайтесь ерундой) Или чем-то не подходит?

[Еврейская Мышь]

  On 2/10/2018 at 5:28 AM, npofopr said:

Я же дал ссылку на css-live, не занимайтесь ерундой) Или чем-то не подходит?

Expand  

Всё хорошо, большое спасибо. Сделал через text-alight: center; Всё работает как и хотел.