Зображення є важливою частиною будь-якої веб-програми. Включення великої кількості зображень у веб-програму зазвичай не рекомендується, але важливо використовувати зображення там, де це потрібно. CSS допомагає нам контролювати відображення зображень у веб-додатках.
Вирівнювання зображення означає розташування зображення по центру, ліворуч і праворуч. Ми можемо використовувати плавати власність і вирівнювання тексту властивість для вирівнювання зображень.
проста програма на java
Якщо зображення знаходиться в елементі div, ми можемо використовувати вирівнювання тексту властивість для вирівнювання зображення в div.
приклад
У цьому прикладі ми вирівнюємо зображення за допомогою вирівнювання тексту власність. Зображення знаходяться в елементі div.
div { border: 2px solid red; } img{ height: 250px; width: 250px; } #left { text-align: left; } #center { text-align: center; } #right{ text-align: right; } <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> Перевірте зараз Вихід
Використання властивості float
Властивість CSS float є властивістю позиціонування. Він використовується для штовхання елемента вліво або вправо, дозволяючи іншим елементам обертатися навколо нього. Зазвичай він використовується із зображеннями та макетами.
дженерики java
Елементи плавають лише горизонтально. Таким чином, можна лише переміщати елементи вліво або вправо, а не вгору або вниз. Плаваючий елемент можна перемістити якомога далі вліво або вправо. Простіше кажучи, це означає, що плаваючий елемент може відображатися в крайньому лівому або крайньому правому куті.
приклад
img{ height: 200px; width: 250px; border: 7px ridge blue; } #left{ float: left; } #right{ float: right; } <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp" id="left"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp" id="right"> Перевірте зараз Вихід
