NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.

Diskuze: Vycentrovaní celého obsahu body vertikálně bez prasekódu

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Michal Žůrek - misaz:10.7.2014 20:31

Zajímalo Vás někdy jak vycentrovat celý obsah vertikálně, bez tabulky nebo zbytečných zanoření? Je to jednoduché.

:root, body {
        width: 100%;
        height: 100%;
}
:root {
        display: table;
}
body {
        display: table-cell;
        vertical-align:middle;
}

první selektor (:root, body) nastaví obou elementů výšku a šířku na 100%, to zajistí že tyto elementy budou zabírat celou obrazovku.

Vertikálně lze centrovat jen obsah buněk tabulky (což je prasárna návrhu CSS), tedy elementu HTML nastavíme display na table, aby se tento element choval jako tabulka.

Poznámka: V CSS 3 se k elementu HTML dostaneme pomocí :root. CSS3 :root zavádí kvůli toho že element html není povinný.

body se tedy musí chovat jako buňka tabulky, nastavíme mu display na table-cell.

Tímto jsem chtěl pomoct všem co s HTML pracují a někdy něco centrovat potřebovali. Zároveň by toto nemělo smysl publikovat jako článek. :)

Editováno 10.7.2014 20:31
 
Odpovědět
10.7.2014 20:31
Avatar
1Pupik1989
Člen
Avatar
1Pupik1989:11.7.2014 10:01

Vertikální centrování lze u všech inline prvků nebo inline-block prvků.

 
Nahoru Odpovědět
11.7.2014 10:01
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.