6 CSS triky na zarovnanie obsahu vertikálne
Hovoríme o vertikálnom zosúladení v CSS, alebo presnejšie, ako to nie je možné. CSS zatiaľ neposkytol oficiálny spôsob, ako vertikálne umiestniť obsah do svojho kontajnera. Je to problém, ktorý pravdepodobne vyčerpal webových vývojárov všade. Ale nemusíte sa báť, v tomto príspevku vám budeme vedieť niekoľko trikov, ktoré vám môžu pomôcť napodobniť účinok.
Tieto triky môžu mať však obmedzenia a pravdepodobne budete musieť použite viac ako jeden trik dokončiť ilúziu. Ak poznáte nejaký iný trik, dajte nám vedieť v komentároch.
1. Použite Absolútne polohovanie
Prvý trik, ktorý tu uvidíme, používa Najprv nastavíme pozíciu kontajnerového prvku na relatívnu, potom nastavíme polohu podriadeného prvku na Aby ste ju zarovnali vertikálne, posuňte polohu podriadeného prvku zhora o polovicu výšky kontajnera a vytiahnite ho o polovicu šírky dieťaťa. Tu je výstup: Tento trik je dokonalý, ak je len jeden detský prvok, inak Transformácia CSS3 uľahčilo umiestňovanie obsahu do stredu. CSS3 Transform, na rozdiel od Za predpokladu, že máme rovnakú štruktúru HTML ako predchádzajúca metóda - jeden nadradený, jeden detský element - Pamätajte však, že transformácie CSS3 nebudú fungovať v programe Internet Explorer 8 a nižšie. Možno budete chcieť použiť akýkoľvek iný spôsob ako záložný. Môžeme tiež použiť Tento trik je vhodný na to, aby ste nestanovili kontajner v pevnej šírke, len nastavte šírku na Ak máte v rámci kontajnera iba jeden riadok textového obsahu, môžete vertikálne zarovnať text pomocou Nezabudnite, že tento trik funguje iba s jedným riadkom textu. Ak sa obsah zlomí na dva alebo viac riadkov, medzera medzi jednotlivými riadkami bude taká, ako sme určili v Osobne, pomocou CSS Table je môj obľúbený trik pre aplikáciu vertikálneho vyrovnania. Funguje v starých prehliadačoch, ako je Internet Explorer 8. Táto metóda sa vykonáva nastavením zobrazenia prvku kontajnera na Poslednou metódou vertikálneho vystredenia je použitie Flexboxu. Flexbox je nový modul v systéme CSS3. Ponúka jednoduchšiu metódu na zarovnanie obsahu. Ak chcete vertikálne umiestniť obsah do flex boxu, jednoducho ho pridajte Majte na pamäti, že niektoré prehliadače Flexbox podporujú iba funkciu čiastočiek modulu Flexbox, ako sú napríklad Internet Explorer 10, Safari, 6 a Chrome 27 a nižšie. Preto, podobne ako trik s CSS3 Transform, uistite sa, že efekt padá pekne v tomto prehliadači.pozície vlastnosť. Máte dve absolútny. To nám umožňuje voľne umiestniť ju cez kontajner. absolútny pozícia ovplyvní druhý prvok v rámci toho istého kontajnera.2. Použite CSS3 Transform
pozície vlastnosť, neovplyvní pozíciu iných prvkov v rámci toho istého kontajnera.50% zhora a pomocou transformácie CSS dáva preklad -50%. A tu to máte.3. Použite výplň
vypchávka vytvoriť ilúziu vertikálneho vyrovnania. Za týmto účelom jednoducho nastavte vrchný a spodný výplň rovnomerne takto:auto.4. Použite výšku riadku
line-height vlastnosť. Nastaviť line-height hodnota približne rovnaká ako výška kontajnera a uvidíte nasledujúci výstup.line-height, dáva nám príliš veľa medzery.5. Použite tabuľku CSS
stôl, zatiaľ čo prvok podriadený má byť zobrazený ako Tabuľka buniek potom použite vertikálne zarovnanie Vlastnosť na stred textu vertikálne.6. Použite Flexbox
align-items: center; a to je to.
