Ako vycentrovať obraz vertikálne a horizontálne pomocou CSS

Mnoho vývojárov bojuje pri práci s obrázkami. Obzvlášť náročné je narábanie s odozvou a zarovnaním, najmä vycentrovanie obrázka v strede stránky.

V tomto príspevku teda ukážem niektoré z najbežnejších spôsobov, ako vycentrovať obraz vertikálne aj horizontálne pomocou rôznych vlastností CSS.

V predchádzajúcom príspevku som prešiel vlastnosťami Pozícia a zobrazenie CSS. Ak tieto vlastnosti nepoznáte, odporúčam vám tieto príspevky skontrolovať skôr, ako si prečítate tento článok.

Ak si to chcete pozrieť, máte video verziu:

Vycentrovať obraz vodorovne

Začnime horizontálnym centrovaním obrázka pomocou 3 rôznych vlastností CSS.

Zarovnanie textu

Prvý spôsob, ako horizontálne vycentrovať obrázok, je použitie text-alignvlastnosti. Táto metóda však funguje, iba ak je obrázok v kontajneri na úrovni blokov, ako napríklad :

 div { text-align: center; } 

Okraj: Auto

Ďalším spôsobom, ako vycentrovať obrázok, je použitie margin: autovlastnosti (pre ľavý okraj a pravý okraj).

Samotné použitie margin: autovšak nebude pre obrázky fungovať. Ak potrebujete použiť margin: auto, musíte použiť aj ďalšie 2 vlastnosti.

Vlastnosť margin-auto nemá žiadny vplyv na prvky na vloženej úrovni. Pretože značka je vloženým prvkom, musíme ju najskôr previesť na prvok na úrovni bloku:

img { margin: auto; display: block; }

Po druhé, musíme tiež definovať šírku. Ľavý a pravý okraj môžu teda zobrať zvyšok prázdneho priestoru a samočinne sa zarovnať, čo robí tento trik (pokiaľ mu nedáme šírku 100%):

img { width: 60%; margin: auto; display: block; }

Displej: Flex

Tretím spôsobom, ako vodorovne vycentrovať obrázok, je použitie display: flex. Rovnako ako sme použili text-alignnehnuteľnosť na kontajner, použijeme aj display: flexna kontajner.

Samotné použitie display: flexvšak nebude stačiť. Kontajner musí mať aj ďalšiu vlastnosť s názvom justify-content:

div { display: flex; justify-content: center; } img { width: 60%; }

justify-contentVlastnosť spolupracuje s display: flex, ktoré môžeme použiť, aby sa obraz vodorovne.

Nakoniec musí byť šírka obrázka menšia ako šírka kontajnera, inak zaberá 100% priestoru a potom ho nemôžeme vycentrovať.

Dôležité: Táto display: flexvlastnosť nie je podporovaná v starších verziách prehľadávačov. Ďalšie informácie nájdete tu.

Vycentrovanie obrazu vertikálne

Displej: Flex

Pre vertikálne zarovnanie je použitie display: flexopäť veľmi užitočné.

Zvážte prípad, keď má náš kontajner výšku 800 pixelov, ale výška obrázka je iba 500 pixelov:

div { display: flex; justify-content: center; height: 800px; } img { width: 60%; height: 500px; }

Teraz, v tomto prípade, pridaním jedného riadku kódu do kontajnera, align-items: centerurobíte trik:

div { display: flex; justify-content: center; align-items: center; height: 800px; }

Tieto align-itemsumiestnenými prvky vlastnosť možno vertikálne ak sú použité spolu s display: flex.

Pozícia: Absolútne a transformačné vlastnosti

Ďalšie metóda pre výškové vyrovnanie je pomocou positiona transformvlastnosti dohromady. Tento je trochu komplikovaný, tak poďme na to krok za krokom.

Krok 1: Definujte absolútnu pozíciu

Najskôr zmeníme pozičné správanie obrazu z staticna absolute:

div { height: 800px; position: relative; background: red; } img { width: 80%; position: absolute; }

Tiež by mal byť vo vnútri relatívne umiestneného kontajnera, takže position: relativedo jeho kontajnera pridáme div.

Krok 2: Definujte horné a ľavé vlastnosti

Po druhé, definujeme horné a ľavé vlastnosti obrázka a nastavíme ich na 50%. Týmto sa počiatočný bod (vľavo hore) obrázka presunie do stredu kontajnera:

img { width: 80%; position: absolute; top: 50%; left: 50%; }

Krok 3: Definujte vlastnosť Transformácia

Ale druhý krok posunul obraz čiastočne mimo jeho kontajner. Musíme to teda vrátiť späť dovnútra.

Definovanie transformvlastnosti a pridanie -50% k jej osi X a Y robí trik:

img { width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Existujú aj iné spôsoby, ako veci centrovať horizontálne a vertikálne, ale vysvetlil som tie najbežnejšie. Dúfam, že vám tento príspevok pomohol pochopiť, ako zarovnať svoje obrázky do stredu stránky.

Ak sa chcete dozvedieť viac informácií o vývoji webových aplikácií, neváhajte navštíviť môj kanál YouTube.

Ďakujem za čítanie!