- Как центрировать изображение в Div по горизонтали?
- Маржа Собственность
- Модуль Flexbox
- Макет представления сетки
- Атрибут позиции
Как центрировать изображение в Div по горизонтали?
Разработчик может использовать свойство margin, модуль Flexbox, макет Grid View и атрибут Position для центрирования изображения в div по горизонтали. Следуйте приведенному ниже руководству, чтобы выровнять изображение по центру по горизонтали в теге div.
Предположим, в HTML-файле есть div, в котором изображение размещено таким образом:
< див сорт '=' 'корень' >
< изображение источник '=' '../книга.jpg' высота '=' 'пятьдесят%' ширина '=' 'пятьдесят%' сорт '=' 'изображение' >
< / див >
Изображение получает ширину и высоту 50% и класс «изображение».
Использование свойства маржи
Пользователи могут добавлять пространство вокруг элементов HTML, используя свойство margin. Он назначает поле в соответствии с пространством, доступным после изменения размера экрана окна. Например, задает для поля слева и справа значение auto, а для свойства display устанавливается значение block:
изображение {
дисплей: блок;
поле слева: авто;
поле справа: авто;
}
После выполнения приведенного выше примера веб-страница выглядит так:
Приведенный выше вывод показал, что изображение теперь находится в центре.
Использование модуля Flexbox
“ флексбокс ” — это модуль, который содержит полный набор свойств. В нашем случае выберите класс корневого элемента и используйте flex в качестве значения свойства display. Установите центр как значение для “ выравнивание содержания ' и ' выравнивание элементов ' характеристики:
.корень {дисплей: гибкий;
оправдывать- содержание : центр;
выравнивание элементов: по центру;
фон- цвет : синий;
}
Веб-страница выглядит так после выполнения кода:
Приведенный выше вывод показывает, что изображение отображается в центре div с фоновым цветом, установленным на «синий».
Использование модуля макета сетки
Макет представления сетки имеет 12 столбцов, а общая ширина установлена на 100%, и он размещает каждый элемент в определенной позиции на веб-странице:
.корень {отображение: сетка;
место-предметы: центр;
}
В приведенном выше фрагменте кода значение «сетка» присваивается свойству отображения. В то время как «place-item» используется как сокращение для свойств «justify-content» и «align-items»:
Вывод подтверждает, что изображение находится в центре div, используя метод сетки:
Использование атрибута позиции
Установив позицию корневого класса в относительное значение, а класс изображения в абсолютное значение. Изображение может отображаться в центре div:
.корень {положение: родственник;
}
.изображение {
ширина : 700 пикселей;
высота : 500 пикселей;
положение: абсолютное;
левый: пятьдесят %;
трансформировать: перевестиX ( - пятьдесят % ) ;
}
Изображение перемещается влево от «50%», а затем преобразуется обратно в «-50%» по оси X. Он отображает изображение в центре div по горизонтали:
Вот как изображение может быть центрировано в div по горизонтали.
Заключение
Чтобы горизонтально установить изображение в элементе div, используйте « допуск », « гибкий модуль », « Макет сетки ' и ' позиция ' характеристики. “ допуск ” свойству left и right установлено значение auto. «Гибкий модуль» и «Макет сетки» настраивают отображение на гибкий и сетчатый соответственно и используют « место предмет “ свойство центрировать изображение. Свойство position устанавливает значение относительно корневого класса и абсолютное значение для класса изображения и использует свойства «left» и «transform». Этот блог успешно продемонстрировал, как центрировать изображения в div по горизонтали.