Изображенията са важна част от всяко уеб приложение. Включването на много изображения в уеб приложение обикновено не се препоръчва, но е важно да използвате изображенията, където е необходимо. CSS ни помага да контролираме показването на изображения в уеб приложенията.

Подравняването на изображение означава да го позиционирате в центъра, отляво и отдясно. Можем да използваме плавам собственост и подравняване на текст свойство за подравняване на изображения.

do и while цикъл в 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 е свойство за позициониране. Използва се за изтласкване на елемент наляво или надясно, което позволява на други елементи да се увият около него. Обикновено се използва с изображения и оформления.

маркировка html

Елементите се движат само хоризонтално. Така че е възможно само да плавате елементи наляво или надясно, не нагоре или надолу. Плаващ елемент може да бъде преместен възможно най-наляво или надясно. Просто това означава, че плаващ елемент може да се показва в крайния ляв или крайния десен ъгъл.

Пример

 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"> 

Изход