Ako vycentrovať obrázky pomocou CSS

Chcete vycentrovať obrázok pomocou CSS? Problémy so zarovnaním sú často zdrojom frustrácie pre web dizajnérov. Našťastie je vycentrovanie obrázka pomocou CSS naozaj jednoduché a my vám v niekoľkých krokoch ukážeme, ako to urobiť.

Rovnako ako pri mnohých úlohách webového dizajnu existuje viac ako jeden spôsob, ako to dosiahnuť! V tomto článku sa budeme zaoberať tromi hlavnými spôsobmi. Začnime!

1. Použiť vlastnosť okraja

Nastavenie marža vlastnosť je jedným z najjednoduchších spôsobov, ako horizontálne vycentrovať obrázok pomocou CSS. Okraje sú základnou zložkou box model CSS.

Najprv budete musieť transformovať prvok obrázka z vloženého prvku na blokový. Prvky HTML na úrovni bloku zaberajú celú šírku svojho nadradeného prvku a dokážu zabrať celú šírku stránky.

Vytvorením prvku obrázka na prvok bloku môžete potom manipulovať s jeho polohou úpravou jeho vodorovných okrajov. Budete tiež musieť nastaviť konkrétnu šírku obrázka, aby ste určili, koľko miesta zaberá obrázok na stránke.

Bez ohľadu na to, akú šírku zvolíte, obrázok bude musieť mať rovnaký ľavý a pravý okraj. Môžete to dosiahnuť jednoducho tak, že vlastnosti margin dáte hodnotu

auto:

img.center {
 displej: blok;
 ľavý okraj: auto;
 pravý okraj: auto;
 šírka: 800px;
}

2. Použite rozloženie Flexbox

Táto metóda vyžaduje vloženie obrázka do prvku na úrovni bloku, zvyčajne a div:

Keď to urobíte, môžete pridať niektoré vlastnosti na manipuláciu s jeho vzhľadom. Budete používať dve vlastnosti CSS.

Prvým z nich je displej majetok s jeho hodnotou nastavenou na flex. Môžete tiež použite flex na zarovnanie prvkov v HTML. Druhá vlastnosť, ktorú pridáte do svojho div, je ospravedlniť-obsah, s jeho hodnotou nastavenou na stred ako:

div.center {
 displej: flex;
 justify-content: center;
}

3. Použite zastaraný stredový prvok

Najlepšie postupy pre web vám odporúčajú používať CSS na úpravu štýlu a HTML na sémantiku, preto by ste túto metódu HTML nemali používať. The stred Značka, ktorá vycentruje svoj obsah vodorovne, je v HTML5 zastaraná.

Ale ak musíte, tu je návod, ako vycentrovať obrázok pomocou samotného HTML. Jednoducho zabalte img tag v stredovom tagu takto:

Takto môžete zarovnať obrázky v HTML

Ukázali sme vám tri rôzne, ľahko použiteľné metódy centrovania obrázkov v dokumente HTML. Vyskúšajte ich všetky a vyberte si ten, ktorý vám najviac vyhovuje. Vyhnite sa tretej metóde, pokiaľ nemáte absolútne na výber!

Jedna vec, ktorú treba mať na pamäti, je, že existuje niekoľko ďalších spôsobov, ako vycentrovať obrázky pomocou HTML a CSS. Jedna bežná metóda, ktorá funguje pre text aj vložené obrázky, je zarovnanie textu nehnuteľnosť.

Ako zarovnať text na stred vašej webovej stránky pomocou CSS

Prečítajte si ďalej

O autorovi