Slike su važan dio svake web aplikacije. Uključivanje puno slika u web aplikaciju općenito se ne preporučuje, ali je važno koristiti slike gdje god je potrebno. CSS nam pomaže kontrolirati prikaz slika u web aplikacijama.

Poravnanje slike znači postavljanje slike u središte, lijevo i desno. Možemo koristiti plutati vlasništvo i poravnanje teksta svojstvo za poravnavanje slika.

Ako je slika u elementu div, tada možemo koristiti poravnanje teksta svojstvo za poravnavanje slike u div.

Primjer

U ovom primjeru, slike poravnavamo pomoću poravnanje teksta vlasništvo. Slike su u 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"> 

Testirajte sada

Izlaz

Korištenje svojstva float

Svojstvo CSS float je svojstvo pozicioniranja. Koristi se za guranje elementa ulijevo ili udesno, dopuštajući drugim elementima da se omotaju oko njega. Obično se koristi sa slikama i izgledima.

Elementi se pomiču samo vodoravno. Dakle, moguće je lebdjeti elemente lijevo ili desno, ne gore ili dolje. Plutajući element može se pomaknuti što je više moguće ulijevo ili udesno. Jednostavno, to znači da se plutajući element može prikazati krajnje lijevo ili krajnje desno.

Primjer

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

Izlaz