css выравнивание img по центру

  • Автор темы Lucania
  • 31
  • Обновлено
  • 05, May 2023
  • #1
Для выравнивания изображения по центру с помощью CSS есть несколько способов.
  • Использование свойства text-align:


cssCopy code
 .container {

text-align: center;
}
.container img {

display: inline-block;
}

  • Использование свойства margin:


cssCopy code
 .container {

display: flex;

justify-content: center;

align-items: center;
}

  • Использование свойства position и transform:


cssCopy code
 .container {

position: relative;
}
.container img {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);
}

  • Использование свойства display и margin:


cssCopy code
 .container {

display: table;

margin: 0 auto;
}
В каждом из этих примеров вы можете заменить .container на класс или идентификатор своего контейнера. Также вы можете настроить размеры изображения и контейнера в соответствии с вашими потребностями.

Lucania


Рег
02 Feb, 2023

Тем
27158

Постов
27328

Баллов
298908
Тем
49554
Комментарии
57426
Опыт
552966

Интересно