Как выровнять блоки inline по центру?

Question

[Norokesku]

На странице https://norokesku.ru/articles не удаётся выровнять по центру инлайновые блоки под заголовком "Магические термины". Если задать родительскому блоку text-align: center; а дочерним блокам поставить float: none; , всё равно не помогает.

Подскажите способ, как выровнять их по центру?

Comments

[Максим]

А почему, по какой причине, вы не пользуетесь флексами ?

[Norokesku]

Brasileiro, а как их можно применить для решения этой проблемы? Если задать дочерним элементам display: inline-flex, ничего не меняется

[Danny Arty]

Norokesku, к .t-item добавьте

.t-item {
vertical-align: middle;
float: none;
}

[Максим]

Norokesku, нет не так, родителю написать display: flex, justify-content: center; align-items: center проверьте и отпишитесь

[Norokesku]

Danny Arty, я имел в виду горизонтальное выравнивание по центру, а не вертикальное

[Danny Arty]

Norokesku, тогда, как и предложили выше, лучше использовать флексы. Родительскому элементу задайте:

.t829__grid {
display: flex;
justify-content: center;
align-items: flex-start;
}

Если не хотите юзать флексы, то:
родительскому блоку

.t829__grid {
text-align: center;
}

Дочерним элементам:

.t_item {
float: none;
}

[Norokesku]

Brasileiro, Получилось, благодарю

[Norokesku]

Danny Arty, благодаря флексам всё успешно выровнялось по центру в горизонтальной плоскости, благодарю. А можете помочь прижать всё к верхнему краю?

[Danny Arty]

Norokesku, вместо align-items: center, задайте align-items: flex-start

[Norokesku]

Danny Arty, Да, теперь всё замечательно)

Answer 1

[MisterVerstalschyk]

Добрый день! Блоки не могут выравниваться, как текст. Аттрибут text-align: center - это для выравнивания текста.

Я знаю 3 способа решения проблемы:
1) Поставь блок с тегами в тег "p". И тогда сам тег "p" - выравнять с помощью text-align: center.

2) Использовать CSS FlexBox.
Блоку с болками задать display: flex. также задать justify-content: center. Далее flex-wrap: wrap.

3) Задать блоку с блоками margin: 0 auto.

Рекомендую 3й способ, но можете использовать любой на свое усмотрение. Просто способ 3, на мой взгляд, лучше подходит для решения вашей проблемы.

Желаю успеха. Если будут вопросы, смело задавайте,попробую помочь)))