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

HTML a CSS HTML a CSS Vycentrovaní celého obsahu body vertikálně bez prasekódu American English version English version

Avatar
Michal Žůrek (misaz):

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:

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.