Obrázky jsou důležitou součástí každé webové aplikace. Zahrnutí velkého množství obrázků do webové aplikace se obecně nedoporučuje, ale je důležité použít obrázky všude tam, kde to vyžadují. CSS nám pomáhá ovládat zobrazování obrázků ve webových aplikacích.

Zarovnání obrázku znamená umístění obrázku na střed, doleva a doprava. Můžeme použít plovák majetek a zarovnání textu vlastnost pro zarovnání obrázků.

Pokud je obrázek v prvku div, můžeme použít zarovnání textu vlastnost pro zarovnání obrázku v div.

Příklad

V tomto příkladu zarovnáváme obrázky pomocí zarovnání textu vlastnictví. Obrázky jsou v prvku 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"> 

Otestujte to hned

Výstup

Použití vlastnosti float

Vlastnost CSS float je vlastnost umístění. Používá se k tlačení prvku doleva nebo doprava, což umožňuje ostatním prvkům, aby se kolem něj obalily. Obvykle se používá u obrázků a rozvržení.

Prvky jsou plovoucí pouze vodorovně. Je tedy možné plout prvky pouze doleva nebo doprava, nikoli nahoru nebo dolů. Plovoucí prvek lze posunout co nejvíce doleva nebo doprava. Jednoduše to znamená, že plovoucí prvek se může zobrazit zcela vlevo nebo zcela vpravo.

Příklad

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

Výstup