CSS nám pomáhá ovládat zobrazování obrázků ve webových aplikacích. Centrování obrázků nebo textů je v CSS běžným úkolem. Chcete-li obrázek vycentrovat, musíme nastavit hodnotu okraj-levý a okraj-pravý na auto a udělejte z něj blokový prvek pomocí displej: blok; vlastnictví.
Pokud je obrázek v prvku div, můžeme použít text-align: center; vlastnost pro zarovnání obrázku na střed v div.
liška nebo vlk
The Říká se, že prvek je vložený prvek, který lze snadno vycentrovat použitím text-align: center; vlastnost CSS na nadřazený prvek, který ji obsahuje.
Poznámka: Obraz nelze vycentrovat, pokud je šířka nastavena na 100 % (plná šířka).
Můžeme použít těsnopisnou vlastnost okraj a nastavte jej na auto pro zarovnání obrazu na střed namísto použití okraj-levý a okraj-pravý vlastnictví.
Podívejme se, jak vycentrovat obrázek aplikací text-align: center; vlastnost na svůj nadřazený prvek.
Příklad
V tomto příkladu zarovnáváme obrázky pomocí text-align: center; vlastnictví. Obrázek je v prvku div.
jak spárovat sluchátka beats
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"> Otestujte to hned Výstup
Příklad
Nyní používáme okraj-levý: auto; pravý okraj: auto; a displej: blok; vlastnosti pro zarovnání obrázku na střed.
body{ background-color: lightblue; } #image { display: block; margin-left: auto; margin-right: auto; border: 8px ridge blue; padding: 5px; } Otestujte to hned Výstup
levé spojení vs pravé spojení
