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

Question

[ch1ps01]

У меня возник следующий вопрос - как можно поставить текст по центру ниже блока с картинкой относительно него самого? просто text-align: center почему-то не работает на первый блок с текстом после самого блока с картинкой, то есть первый устанавливается криво, второй уже по центру, касательно того, что-бы постаить ширину блоку с текстом такой же, что и у картинки тоже такое себе, ибо если первый рядок буде дольше, то получится неровно

Answer 1

[Deniel]

.container {
  display: flex;
  align-items: center; /* Центрирует все элементы по вертикали по центру */
}

.image {
  flex-shrink: 0; /* Чтобы изображение не уменьшалось */
  margin-right: 10px; /* Регулируйте отступ между изображением и текстом по вашему вкусу */
}

.text {
  width: 100%; /* Занимает всю доступную ширину */
  text-align: center; /* Выравнивает текст по центру */
}

Примени класс container к общему контейнеру, image к блоку с изображением а text к блоку с текстом.

Comments

[ch1ps01]

спасибо