CSS nám pomáha ovládať zobrazovanie obrázkov vo webových aplikáciách. Centrovanie obrázkov alebo textov je v CSS bežnou úlohou. Ak chcete vycentrovať obrázok, musíme nastaviť hodnotu ľavý okraj a okraj-pravý do auto a urobte z neho blokový prvok pomocou displej: blok; nehnuteľnosť.
Ak je obrázok v prvku div, môžeme použiť text-align: center; vlastnosť na zarovnanie obrázku na stred v div.
The O prvku sa hovorí, že je to vložený prvok, ktorý možno ľahko vycentrovať použitím prvku text-align: center; vlastnosť CSS na nadradený prvok, ktorý ju obsahuje.
Poznámka: Obrázok nemožno vycentrovať, ak je šírka nastavená na 100 % (plná šírka).
Môžeme použiť vlastnosť skratky marža a nastavte ho na auto na zarovnanie obrazu na stred namiesto použitia ľavý okraj a okraj-pravý nehnuteľnosť.
Pozrime sa, ako vycentrovať obrázok aplikáciou text-align: center; vlastnosť k svojmu rodičovskému prvku.
Príklad
V tomto príklade zarovnávame obrázky pomocou text-align: center; nehnuteľnosť. Obrázok je v prvku 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"> Vyskúšajte to Výkon
Príklad
Teraz používame ľavý okraj: auto; pravý okraj: auto; a displej: blok; vlastnosti na zarovnanie obrázka na stred.
body{ background-color: lightblue; } #image { display: block; margin-left: auto; margin-right: auto; border: 8px ridge blue; padding: 5px; } Vyskúšajte to Výkon
