Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
BF extended 2022

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

 

Všechny články v sekci
Pozicování a velikost - CSS vlastnosti
Článek pro vás napsal David Čápka
Avatar
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity

 

 

Komentáře

Avatar
Michal Žůrek - misaz:25.6.2013 19:29

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

 
Odpovědět
25.6.2013 19:29
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovědět
25.6.2013 20:00
Absolvent FIT ČVUT :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Michal Žůrek - misaz:25.6.2013 20:02

... 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
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Honza Bittner:25.6.2013 20:04

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

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

Odpovědět
25.6.2013 20:04
Absolvent FIT ČVUT :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Odpovídá na Honza Bittner
Michal Žůrek - misaz:25.6.2013 21:03

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

 
Odpovědět
25.6.2013 21:03
Avatar
Kit
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Kit:25.6.2013 21:05

Zkus procenta.

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.