vertical-align - Český CSS 3 manuál

HTML a CSS Manuál Pozicování a velikost vertical-align - Český CSS 3 manuál

Pomocí CSS 3 vlastnosti vertical-align nastavujeme svislé zarovnání HTML elementu. Pozor, vlastnost funguje pouze u in-line elementů nebo u tabulek, nelze přes ni svisle centrovat text v bloku.

Hodnoty

  • délka - Posune element o danou délku dolů. Pro posun opačným směrem můžeme uvést zápornou hodnotu.
  • % - Posune element dolů o danou část z výšky řádku. Opět můžeme použít zápornou hodnotu.
  • baseline - Umístí element na řádek.
  • sub - Umístí element na pozici dolního indexu.
  • super - Umístí element na pozici horního indexu.
  • top - Umístí element co nejvýše.
  • text-top - Umístí element co nejvýše tak, aby se vrchol fontu dotýkal vrcholu elementu.
  • middle - Vycentruje element svisle.
  • bottom - Umístí obsah na dno elementu (co nejníže).
  • text-bottom - Umístí obsah na dno elementu tak, aby se dna dotýkal konec fontu.
  • inherit - Vlastnost "vertical-align" se zdědí od rodičovského elementu.

Ukázka

Ukažme si, jak element vycentrovat na vrchol řádku.

<!DOCTYPE html>
<html>
        <head>
                <style>
                #kontejner
                {
                        vertical-align: top;
                        border: 1px solid blue;
                }
                </style>
        </head>
        <body>
                <span id="kontejner">
                Element je zarovnaný nahoru.
                <img src="ptak.png" alt="Pták" />
                </span>
        </body>
</html>

Výsledek:

Ukázka svislého zarovnání přes CSS

Zarovnat obsah blokového elementu můžeme malým hackem. Nastavíme mu, aby se vykresloval jako buňka tabulky pomocí vlastnosti display:

<!DOCTYPE html>
<html>
        <head>
                <style>
                #kontejner
                {
                        display: table-cell;
                        vertical-align: middle;
                        border: 1px solid blue;
                        width: 100px;
                        height: 250px;
                }
                </style>
        </head>
        <body>
                <div id="kontejner">
                        <img src="ptak.png" alt="Pták" />
                </div>
        </body>
</html>

Výsledek:

Ukázka svislého centrování přes CSS

 

  Aktivity (1)

Manuál pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Miniatura
Všechny články v sekci
Pozicování a velikost - CSS vlastnosti

 

 

Komentáře

Avatar
Michal Žůrek (misaz):

jak se dá obejít to s tím textem?

Odpovědět 25.6.2013 19:29
Nesnáším {}, proto se jim vyhýbám.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovědět 25.6.2013 20:00
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Michal Žůrek (misaz):

... nelze přes ni svisle centrovat text v bloku

zajímá mě jak to lze obejít.

Odpovědět 25.6.2013 20:02
Nesnáším {}, proto se jim vyhýbám.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Honza Bittner:

jak třeba vycentrovat text v divů vertikálně ?

nastavíš horní a dolní padding ...

Odpovědět 25.6.2013 20:04
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Honza Bittner
Michal Žůrek (misaz):

a jak to mám udělat když nevím přesný počet řádku textu?

Odpovědět 25.6.2013 21:03
Nesnáším {}, proto se jim vyhýbám.
Avatar
Kit
Redaktor
Avatar
Odpovědět 25.6.2013 21:05
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
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 6 zpráv z 6.