Центрировать изображение с помощью text-align: center?

Это не всегда работает... Если не сработает, попробуйте:

img {
    display: block;
    margin: 0 auto;
}

Чтобы центрировать изображение с помощью CSS, вы можете использовать следующий код:

img {
    display: block;          /* Устанавливаем блочное отображение для изображения */
    margin-right: auto;     /* Автоматические отступы справа */
    margin-left: auto;      /* Автоматические отступы слева */
}

Этот стиль устанавливает изображение как блочный элемент, что позволяет использовать автоматические отступы для центровки. Когда мы задаем margin-right: auto и margin-left: auto, браузер автоматически распределяет оставшееся пространство по бокам изображения, позволяя ему быть по центру родительского контейнера. Не забудьте, что данный метод работает только если родительский элемент имеет заданную ширину.

Если вы используете класс с изображением, то следующий код поможет вам его центрировать:

.class {
    display: block;
    margin: 0 auto;
}

Если вы хотите центрировать только изображение внутри определенного класса, то воспользуйтесь следующим кодом:

.class img {
    display: block;
    margin: 0 auto;
}

Таким образом, в первом случае мы центрируем весь блок с изображением, а во втором — только само изображение внутри указанного класса.

Просто измените выравнивание родителя 😃

Попробуйте установить следующие свойства для родителя:

text-align: center;

Вы можете использовать text-align: center на родительском элементе и изменить стиль img на display: inline-block. Таким образом, изображение будет вести себя как текстовый элемент и будет выровнено по центру, если у родителя задана ширина.

img {
    display: inline-block;
}