Вам нужна помощь с центрированием изображений? Не смотрите дальше! В этом посте вы узнаете 4 метода центрирования изображений в HTML и CSS.
Методы включают горизонтальное и вертикальное выравнивание. Неважно, есть ли у вас доступ только к редактору HTML, потому что я разберу встроенные и внешние методы CSS.
Начнем!
Отправной точкой каждого метода будет изображение пингвина.
Вы видите, что изображение выровнено по левому краю.
Цель состоит в том, чтобы выровнять изображение по центру.
Предпочитаете видео?
Ознакомьтесь с руководством на моем канале YouTube.
Метод 1: Text-align
Этот первый метод использует свойство text-align для центрирования изображений внутри другого элемента.
Начнем с того, что поместим элемент img внутрь элемента div.
<дел>
Кодовый язык: HTML, XML (xml)
Это необходимо, поскольку для элементов изображения свойство отображения по умолчанию установлено как встроенное.
Встроенные элементы занимают ровно столько места, сколько им нужно.
Элемент div имеет свойство отображения по умолчанию блока.
Блочные элементы занимают всю доступную ширину.
Мы можем использовать это, чтобы выровнять изображение по центру этого div.
После того, как мы завернули элемент, мы можем перейти к центрированию.
Для этого мы установим для свойства text-align элемента div значение center.
дел {
выравнивание текста: по центру;
} Язык кода: CSS (css)
Центрирует элемент по горизонтали.
Попробуйте
Внешний
0
Встроенный
0
Метод 2: Margin
Второй метод использует свойство margin.
С помощью этого метода вам не нужно заключать элемент изображения в div.
Начните с установки для свойства display элемента img значения block.
изображение {
дисплей: блок;
} Язык кода: CSS (css)
Затем установите для свойства margin элемента img значение 0 auto;
изображение {
дисплей: блок;
поле: 0 авто;
} Язык кода: CSS (css)
Теперь изображение центрировано по горизонтали.
Первое значение поля (0) относится к верхнему и нижнему полям элемента.
Это гарантирует отсутствие полей.
Второе значение margin(auto) относится к левому и правому полям элемента.
Вместе он одинаково устанавливает поля слева и справа.
Центрирует изображение.
Попробуйте
Внешний
0
Встроенный
0
Метод 3: Flex
В третьем методе используется свойство display, для которого задано значение flex.
Это позволит центрировать изображение по горизонтали и вертикали.
Начните с помещения элемента img в элемент div.
<дел>
Язык кода: HTML, XML (xml)
Затем установите для свойства display элемента div значение flex.
дел {
дисплей: гибкий;
} Язык кода: CSS (css)
После этого установите для свойства justify-content элемента div значение center.
дел {
дисплей: гибкий;
выравнивание содержимого: по центру;
} Кодовый язык: CSS (css)
Теперь вы центрировали изображение по горизонтали!
С помощью этого метода вы также можете центрировать изображение по вертикали.
Установите для свойства align-items элемента div значение center.
дел{
дисплей: гибкий;
выравнивание содержимого: по центру;
выравнивание элементов: по центру;
} Язык кода: CSS (css)
Затем установите для свойства height элемента div значение 100vh.
дел {
дисплей: гибкий;
выравнивание содержимого: по центру;
выравнивание элементов: по центру;
высота: 100вх;
} Кодовый язык: CSS (css)
Теперь вы также центрировали изображение по вертикали!
Попробуйте
Внешний
0
Встроенный
0
Метод 4: Сетка
Последний метод — это свойство отображения, для которого задано значение сетки.
Начните с помещения элемента img в элемент div.
<дел>
Язык кода: HTML, XML (xml)
Затем установите для свойства display элемента div значение grid.
дел {
отображение: сетка;
} Язык кода: CSS (css)
После этого вы можете установить для свойства place-items элемента div значение center.
дел{
отображение: сетка;
место-предметы: центр;
} Язык кода: CSS (css)
Этот метод центрирует элемент img по горизонтали и вертикали.
Вертикальное выравнивание зависит от высоты элемента.
Для демонстрационных целей я решил установить высоту 100vh.
Это означает, что высота составляет 100% от высоты области просмотра.
дел {
отображение: сетка;
место-предметы: центр;
высота: 100вх;
} Язык кода: CSS (css)
Теперь вы можете видеть, что изображение также выровнено по вертикали.
Попробуйте
Внешний
0
Встроенный
0
Спасибо, что прочитали этот пост! Теперь вы научились центрировать изображения в HTML и CSS.
Хорошего дня!
[CSS] — Как центрировать изображения в сетке с помощью CSS — SheCodes
Узнайте, как использовать свойства CSS justify-content и align-items для центрирования изображений в сетке. Быстрый совет с примером кода.
👩💻 Технический вопрос
Спросил 4 месяца назад
в
CSS
by Katrina
как центрировать изображения в сетке
сетка
макет
центр
изображений
выравнивание содержания
выравнивание элементов
Дополнительные вопросы по кодированию о CSS
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 7 дней назад
в
CSS
Анамария
Переместите смайлики друг на друга, используя относительное позиционирование
как мне изменить границу моего фона, чтобы она не проходила по всей веб-странице
УС
фон
граница
ширина
допуск
прокладка
👩💻 Технический вопрос
Спросил 16 дней назад
в
CSS
by Alana
как сделать пуговицу в виде круга
пуговица
круг
радиус границы
HTML
Свойства CSS
👩💻 Технический вопрос
Спросил 16 дней назад
в
CSS
Наталья
как изменить цвет подчеркивания
подчеркивание
цвет
украшение текста
цвет оформления текста
👩💻 Технический вопрос
Спросил 17 дней назад
в
CSS
Анастасия
как сделать видимыми линии сетки?
УС
HTML
стол
обрушение границы
граница
👩💻 Технический вопрос
Спросил 17 дней назад
в
CSS
Яна
как сделать пробел между строками в css?
УС
ряд
поля
👩💻 Технический вопрос
Спросил 17 дней назад
в
CSS
Каролина
как сделать мою страницу приложения погоды отзывчивой к просмотру телефона?
УС
медиазапросы
Отзывчивый дизайн
приложение погоды
просмотр телефона
👩💻 Технический вопрос
Спросил 17 дней назад
в
CSS
от Atenas
как изменить размер фона при наведении на текст
при наведении
фон
переход
👩💻 Технический вопрос
Спросил 18 дней назад
в
CSS
by OFFA
как добавить изображение внутри элемента ввода
CSS
вход
фоновое изображение
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 18 дней назад
в
CSS
Бретань
код для добавления изображения на фон
background-image
Селекторы CSS
веб-изображения
👩💻 Технический вопрос
Спросил 18 дней назад
в
CSS
by reginald
Как выровнять текст по той же линии, что и изображение, но также выровнять текст по верхнему краю изображения
align
вертикальное выравнивание
текст
изображение
поля
👩💻 Технический вопрос
Спросил 18 дней назад
в
CSS
by Duduzile
Почему мой стиль кнопки не работает
кнопка
стиль
синтаксис
конфликтующие стили
таргетинг
инструменты разработчика
👩💻 Технический вопрос
Спросил 18 дней назад
в
CSS
by My-Anna
Могу ли я изменить расстояние между буквами в моем списке?
УС
Межбуквенное расстояние
список
👩💻 Технический вопрос
Спросил 18 дней назад
в
CSS
by My-Anna
Как изменить межстрочный интервал?
УС
высота линии
межстрочный интервал
веб-разработка
👩💻 Технический вопрос
Спросил 18 дней назад
в
CSS
by My-Anna
Как изменить шрифт текста?
УС
текст
шрифт
семейство шрифтов
👩💻 Технический вопрос
Спросил 18 дней назад
в
CSS
by My-Anna
Как сделать так, чтобы элементы списка располагались рядом друг с другом?
УС
список
встроенный блок
отображать
интервал
👩💻 Технический вопрос
Спросил 19 дней назад
в
CSS
by Niki
отступы кнопок
CSS
кнопка
набивка
веб-разработка
👩💻 Технический вопрос
Спросил 19 дней назад
в
CSS
by Niki
как сделать размытую тень вокруг изображения
CSS
коробка-тень
изображение
эффект размытия
эффект распространения
👩💻 Технический вопрос
Спросил 19 дней назад
в
CSS
Ники
как изменить цвет фона?
цвет фона
CSS
веб-дизайн
дизайн веб-страницы
значения цвета
👩💻 Технический вопрос
Спросил 19 дней назад
в
CSS
Сара
Когда следует использовать переменные css?
УС
переменные
многоразовый
Глобальный
обновление
👩💻 Технический вопрос
Спросил 19 дней назад
в
CSS
by Saba
как можно изменить непрозрачность фона?
УС
фон
непрозрачность
👩💻 Технический вопрос
Спросил 20 дней назад
в
CSS
от Ciara
какие продвинутые селекторы CSS
продвинутые селекторы CSS
селектор братьев и сестер
селектор атрибутов
n-й дочерний селектор
👩💻 Технический вопрос
Спросил 20 дней назад
в
CSS
от Lungelo
тип направления гибкости в css
УС
флексбокс
flex-направление
ряд
столбец
👩💻 Технический вопрос
Спросил 20 дней назад
в
CSS
by Saba
как сделать абсолютную коробку отзывчивой? он не отвечает ширине: 100%
абсолютная позиция
отзывчивый
процентные значения
относительное положение
👩💻 Технический вопрос
Спросил 21 день назад
в
CSS
Дженнифер
высота строки
высота строки
Свойство CSS
вертикальное пространство
текст
👩💻 Технический вопрос
Спросил 21 день назад
в
CSS
от Jasmine
как отобразить что-то еще при наведении курсора на кнопку?
УС
парить
показать свойство
👩💻 Технический вопрос
Спросил 22 дня назад
в
CSS
Шарлотта
Какие есть варианты выравнивания содержимого?
УС
флексбокс
оправдать содержание
центральные элементы
👩💻 Технический вопрос
Спросил 22 дня назад
в
CSS
by Confidence
как изменить ширину контейнера
контейнер
ширина
Свойство CSS
процент
👩💻 Технический вопрос
Спросил 23 дня назад
в
CSS
от Лунгело
css удалить подчеркивание из ссылки
CSS
связь
украшение текста
подчеркнуть
стиль
👩💻 Технический вопрос
Спросил 23 дня назад
в
CSS
от Lungelo
в css как разместить элементы в списке рядом друг с другом, а не друг под другом
CSS
список
в соответствии
встроенный блок
поплавок
👩💻 Технический вопрос
Спросил 24 дня назад
в
CSS
от Unisha
, можете ли вы объяснить положение относительного элемента CSS?
УС
позиция
родственник
вершина
левый
макет
👩💻 Технический вопрос
Спросил 25 дней назад
в
CSS
by OFFA
как использовать медиа-запрос
медиа-запрос
CSS техника
Отзывчивый дизайн
разрешение экрана
👩💻 Технический вопрос
Спросил 25 дней назад
в
CSS
Рикке В.
Что такое линейный градиент?
линейно-градиентный
фон
веб-дизайн
эффект градиента
Функция CSS
👩💻 Технический вопрос
Спросил 25 дней назад
в
CSS
Рикке В.
где их использовать?
УС
единицы
родственник
Эм
👩💻 Технический вопрос
Спросил 26 дней назад
в
CSS
Мишель
Почему класс «Сегодня» не помещен непосредственно под класс «Визуальный»? Как мне сделать это так?
.weatherAppBody {
дисплей: блок;
верхнее поле: 100 пикселей;
поле справа: 300 пикселей;
нижняя граница: 100px;
поле слева: 300px;
отступ: 80px 100px;
}
ч2 {
размер шрифта: 20px;
выравнивание текста: по левому краю;
поле: 0 авто;
плыть налево;
}
h3 {
вес шрифта: 100;
}
. текущая информация {
отображение: встроенный блок;
выравнивание текста: по левому краю;
поле: 0 авто;
}
.localInfo {
стиль списка: нет;
отображение: встроенный блок;
}
.сегодня {
выравнивание текста: вправо;
поле сверху: 0px;
поле справа: 0px;
поплавок: справа;
}
.визуальный {
стиль списка: нет;
поплавок: справа;
поле сверху: 0px;
поле справа: 0px;
ясно: оба;
}
.Полная неделя {
размер шрифта: 20px;
положение: нижнее; внизу: 0px;
нижняя граница: 0px;
}
УС
флексбокс
заказ имущества
👩💻 Технический вопрос
Спросил 26 дней назад
в
CSS
Рикке В.
что такое непрозрачность
CSS
непрозрачность
прозрачность
👩💻 Технический вопрос
Спросил 26 дней назад
в
CSS
Мишель
Когда я захожу в
и помещаю фоновое изображение, как мне изменить его высоту и ширину?
фоновое изображение
размер фона
Свойство CSS
👩💻 Технический вопрос
Спросил 26 дней назад
в
CSS
Мишель
Как сделать текст-заполнитель в поле ввода полужирным?
УС
поле ввода
текст-заполнитель
полужирный
👩💻 Технический вопрос
Спросил 27 дней назад
в
CSS
Стейси
как остановить повторение фонового изображения? Я хочу, чтобы он занимал весь экран.
фоновое изображение
Свойство CSS
фоновый повтор
размер фона
👩💻 Технический вопрос
Спросил 28 дней назад
в
CSS
Честер
как переместить полосу прокрутки
CSS
полоса прокрутки
стиль
👩💻 Технический вопрос
Спросил 29 дней назад
в
CSS
от Vennesa
как использовать line-height
CSS
высота линии
свойство
регулировка
👩💻 Технический вопрос
Спросил 29 дней назад
в
CSS
от Vennesa
что делает box-shadow?
УС
коробка-тень
HTML-элемент
свойство
эффект
Просмотрите вопросы по кодированию по темам: HTML CSS JavaScript Код ВС питон Реагировать Начальная загрузка Попутный ветер Джава PHP Node.
текущая информация {
отображение: встроенный блок;
выравнивание текста: по левому краю;
поле: 0 авто;
}
.localInfo {
стиль списка: нет;
отображение: встроенный блок;
}
.сегодня {
выравнивание текста: вправо;
поле сверху: 0px;
поле справа: 0px;
поплавок: справа;
}
.визуальный {
стиль списка: нет;
поплавок: справа;
поле сверху: 0px;
поле справа: 0px;
ясно: оба;
}
.Полная неделя {
размер шрифта: 20px;
положение: нижнее; внизу: 0px;
нижняя граница: 0px;
} 
