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"> Preizkusite zdaj Izhod
