Ako umiestniť prvky webu pomocou vertikálneho zarovnania CSS

Google vyhľadávanie









Scenéria
Popis






les

Lorem ipsum dolor sit amet.






oceán

Lorem ipsum dolor sit amet.

The HTML kód vyššie vytvorí jednoduchú webovú stránku, ktorá zobrazuje štyri prvky: prepojený text, obrázok, vložené video a tabuľku. Vo vašom prehliadači by to malo vyzerať takto:

Ako vertikálne zarovnať text

V predvolenom nastavení je väčšina textových prvkov (ako sú nadpisy,

a

Niektoré textové prvky, ako napr a značky sú vložené. V dôsledku toho podporujú vlastnosť vertikálneho zarovnania. Ak chcete text zarovnať vertikálne, jednoducho priraďte príslušnú hodnotu vlastnosti CSS vertical-align.

Pomocou zvislého zarovnania hornej hodnoty na texte

a {
 vertikálne zarovnať: hore;
}

Pridanie CSS kód hore k základnému HTML dokumentu zarovná hornú časť text tagu s hornou časťou najvyššieho prvku v riadku. Vytvorenie nasledujúceho aktualizovaného displeja:

Použitie percentuálnej hodnoty v texte

a {
 vertikálne zarovnanie: -50 %;
}

CSS vyššie zarovná textový prvok na pozíciu, ktorá je 50 % pod základnou čiarou nadradeného prvku. Vo vašom prehliadači vytvára nasledujúci výstup:

Ako môžete vidieť na obrázku vyššie, textový prvok zaberá pozíciu pod obrázkom a prvkami videa, ktoré sú na rovnakom riadku. Ak chcete umiestniť tento prvok na základnú čiaru alebo nad ňou, použite kladnú percentuálnu hodnotu.

Použitie hodnoty dĺžky v texte

a {
 vertikálne zarovnanie: 90px;
}

Vyššie uvedený kód zarovná základnú čiaru textového prvku na dĺžku 90 pixelov nad základnú čiaru nadradeného prvku. V prehliadači sa tak vytvorí nasledujúci výstup:

Ako vertikálne zarovnať obrázky

The tag je vložený prvok, s ktorým dobre funguje vlastnosť CSS vertical-align.

Použitie superhodnoty vertikálneho zarovnania na snímkach

img {
 vertikálne zarovnanie: super;
}

Vyššie uvedený kód umiestni obrázok na základnú čiaru horného indexu nadradeného prvku. To znamená na pozícii nad základnou čiarou, ako môžete vidieť v nasledujúcom výstupe:

Použitie percentuálnej hodnoty vertikálneho zarovnania na obrázkoch

img {
 vertikálne zarovnanie: 25 %;
}

Vyššie uvedený kód zarovnáva základnú čiaru prvku obrázka o 25 % nad základnou čiarou nadradeného prvku. To vytvára nasledujúci zrkadlový efekt super hodnoty:

Použitie hodnoty dĺžky vertikálneho zarovnania na obrázkoch

img {
 vertikálne zarovnanie: 5px;
}

Vyššie uvedený kód zarovná základnú čiaru prvku obrázka na pozíciu 5 pixelov nad základnou čiarou nadradeného prvku. To vytvára efekt podobný účinku super a 25% hodnôt:

Vložené médiá, ako sú videá a prvky iframe, sú vložené prvky HTML. Preto s nimi skvele funguje vlastnosť CSS vertical-align.

Použitie superhodnoty vertikálneho zarovnania na videu

video {
 vertikálne zarovnať: sub;
}

Vyššie uvedený kód umiestni video na základný index dolného indexu nadradeného prvku. To znamená na pozícii pod základnou čiarou, ako môžete vidieť v nasledujúcom výstupe:

Použitie percentuálnej hodnoty vertikálneho zarovnania na videu

video {
 vertikálne zarovnanie: -25 %;
}

Vyššie uvedený kód zarovnáva základnú čiaru prvku videa na 25 % pod základnú čiaru nadradeného prvku. To vytvára nasledujúci zrkadlový efekt vedľajšej hodnoty:

Použitie hodnoty dĺžky vertikálneho zarovnania na videu

video {
 vertikálne zarovnanie: -5px;
}

Vyššie uvedený kód zarovná základnú čiaru prvku obrázka na pozíciu 5 pixelov pod základnou čiarou nadradeného prvku. To vytvára efekt ako hodnoty sub a -25%:

Ako vertikálne zarovnať položky v tabuľke

Použitie vlastnosti vertical-align s tabuľkou je trochu zložité, pretože tabuľka je blokový prvok. Avšak,

Pomocou zvislého zarovnania hornej hodnoty v údajoch tabuľky

td {
 výška: 40px;
 vertikálne zarovnať: hore;
}

Vyššie uvedený kód pridá ku každej bunke v tabuľke výšku 40 pixelov. Potom zarovná údaje v každej bunke k hornej časti každého riadku. V prehliadači sa tak vytvorí nasledujúci výstup:

Pomocou zvislého zarovnania na stred hodnoty v údajoch tabuľky

td {
 výška: 40px;
 vertikálne zarovnať: stred;
}

Stredná hodnota vertikálneho zarovnania v kóde vyššie vertikálne vycentruje údaje v každej bunke. V prehliadači vytvára nasledujúci výstup:

Pomocou zvislého zarovnania spodnej hodnoty v údajoch tabuľky

td {
 výška: 40px;
 vertikálne zarovnať: dole;
}

Vyššie uvedený kód zarovná údaje v každej bunke na koniec každého riadka. V prehliadači vytvára nasledujúci výstup:

Teraz môžete zarovnať prvky na svojej webovej stránke

Vlastnosť CSS vertical-align teraz môžete použiť s množstvom rôznych vložených prvkov vrátane textu, vložených médií a údajov tabuľky. Všeobecným pravidlom je, že vlastnosť vertikálneho zarovnania funguje iba na vložených prvkoch a prvkoch vložených do bloku.

Túto vlastnosť však môžete použiť na blokových prvkoch, len ich musíte najskôr previesť na inline alebo inline-block elementy. Pamätajte, že vertikálne zarovnanie môžete kombinovať s inými vlastnosťami zarovnania, ako je napríklad zarovnanie textu.

O autorovi

Kadeisha Kean (52 publikovaných článkov)

Kadeisha Kean je vývojár úplného softvéru a technicko-technologický spisovateľ. Má výraznú schopnosť zjednodušiť niektoré z najzložitejších technologických konceptov; produkovať materiál, ktorý je ľahko zrozumiteľný pre každého technologického nováčika. Je nadšená písaním, vývojom zaujímavého softvéru a cestovaním po svete (prostredníctvom dokumentárnych filmov).

Viac od Kadeishy Keanovej