CSS допомагає нам контролювати відображення зображень у веб-додатках. Центрування зображень або текстів є поширеним завданням у CSS. Щоб відцентрувати зображення, ми повинні встановити значення margin-left і margin-right до авто і зробити його блоковим елементом за допомогою дисплей: блок; власність.
Якщо зображення знаходиться в елементі div, ми можемо використовувати вирівнювання тексту: центр; властивість для вирівнювання зображення по центру div.
The елемент називається вбудованим елементом, який можна легко відцентрувати, застосувавши вирівнювання тексту: центр; властивості CSS для батьківського елемента, який його містить.
Примітка: зображення неможливо вирівняти по центру, якщо ширина встановлена на 100% (повна ширина).
Ми можемо використовувати властивість скорочення запас і встановіть його авто для вирівнювання зображення по центру, а не за допомогою margin-left і margin-right власність.
Давайте подивимося, як центрувати зображення за допомогою застосування вирівнювання тексту: центр; властивість свого батьківського елемента.
приклад
У цьому прикладі ми вирівнюємо зображення за допомогою вирівнювання тексту: центр; власність. Зображення знаходиться в елементі div.
div { border: 2px solid red; } img{ height: 300px; width: 300px; } #center { text-align: center; } <img src="//techcodeview.com/img/css-tutorial/36/how-center-images-css.webp"> Перевірте зараз Вихід
поїздка але
приклад
Зараз ми використовуємо margin-left: авто; поле справа: авто; і дисплей: блок; властивості для вирівнювання зображення по центру.
body{ background-color: lightblue; } #image { display: block; margin-left: auto; margin-right: auto; border: 8px ridge blue; padding: 5px; } Перевірте зараз Вихід
