Slike so pomemben del vsake spletne aplikacije. Vključevanje velikega števila slik v spletno aplikacijo na splošno ni priporočljivo, vendar je pomembno, da slike uporabite, kjer koli je to potrebno. CSS nam pomaga nadzorovati prikaz slik v spletnih aplikacijah.

Poravnati sliko pomeni postaviti sliko na sredino, levo in desno. Lahko uporabimo lebdi premoženje in poravnava besedila lastnost za poravnavo slik.

Če je slika v elementu div, potem lahko uporabimo poravnava besedila lastnost za poravnavo slike v div.

Primer

V tem primeru slike poravnamo z uporabo poravnava besedila premoženje. Slike so v elementu 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"> 

Preizkusite zdaj

Izhod

Uporaba lastnosti float

Lastnost CSS float je lastnost pozicioniranja. Uporablja se za potiskanje elementa v levo ali desno, kar omogoča drugim elementom, da se ovijejo okoli njega. Na splošno se uporablja s slikami in postavitvami.

Elementi lebdijo le vodoravno. Tako je mogoče lebdeti elemente levo ali desno, ne pa gor ali dol. Lebdeči element se lahko premakne čim bolj v levo ali desno. To preprosto pomeni, da se lahko lebdeči element prikaže na skrajni levi ali skrajni desni strani.

Primer

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

Izhod