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.
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.
