Слике су важан део сваке веб апликације. Укључивање великог броја слика у веб апликацију се генерално не препоручује, али је важно да користите слике где год је то потребно. ЦСС нам помаже да контролишемо приказ слика у веб апликацијама.

Поравнавање слике значи постављање слике у центар, лево и десно. Можемо користити пловак имовине и Поравнање текста својство за поравнавање слика.

Ако је слика у елементу див, онда можемо користити Поравнање текста својство за поравнавање слике у див.

Пример

У овом примеру, поравнавамо слике помоћу Поравнање текста имовина. Слике су у елементу див.

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

Тестирајте одмах

Излаз

Коришћење својства флоат

Својство ЦСС флоат је својство позиционирања. Користи се за гурање елемента улево или удесно, омогућавајући другим елементима да се омотају око њега. Обично се користи са сликама и распоредима.

Елементи се лебде само хоризонтално. Дакле, могуће је само лебдети елементе лево или десно, а не горе или доле. Плутајући елемент се може померити што је више могуће улево или удесно. Једноставно, то значи да се плутајући елемент може приказати крајње лево или крајње десно.

Пример

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

Излаз