CSS nam pomaže kontrolirati prikaz slika u web aplikacijama. Centriranje slika ili teksta uobičajen je zadatak u CSS-u. Da bismo centrirali sliku, moramo postaviti vrijednost margin-lijevo i margin-desno do auto i učinite ga blok elementom pomoću prikaz: blok; vlasništvo.
Ako je slika u elementu div, tada možemo koristiti poravnanje teksta: središte; svojstvo za poravnavanje slike u središte div.
The za element se kaže da je umetnuti element koji se lako može centrirati primjenom poravnanje teksta: središte; svojstvo CSS-a nadređenom elementu koji ga sadrži.
Napomena: Slika se ne može centrirati ako je širina postavljena na 100% (puna širina).
Možemo koristiti svojstvo stenografije margina i postavite ga na auto za poravnavanje slike u sredini, umjesto da koristite margin-lijevo i margin-desno vlasništvo.
Pogledajmo kako centrirati sliku primjenom poravnanje teksta: središte; svojstvo svom nadređenom elementu.
Primjer
U ovom primjeru, slike poravnavamo pomoću poravnanje teksta: središte; vlasništvo. Slika je u elementu div.
div { border: 2px solid red; } img{ height: 300px; width: 300px; } #center { text-align: center; } <img src="//techcodeview.com/img/css-tutorial/36/how-center-images-css.webp"> Testirajte sada Izlaz
Primjer
Sada koristimo margin-lijevo: auto; margin-desno: automatski; i prikaz: blok; svojstva za poravnavanje slike prema sredini.
body{ background-color: lightblue; } #image { display: block; margin-left: auto; margin-right: auto; border: 8px ridge blue; padding: 5px; } Testirajte sada Izlaz
