Válí se ti projekty v šuplíku? Dostaň je mezi lidi a získej cool tričko a body na profi IT kurzy v soutěži ITnetwork summer 2017!
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)
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  +6 10.7.2014 20:31
Nesnáším {}, proto se jim vyhýbám.
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.