English-only | Jenom česky | Bilingual/Dvojjazyčně

CSS Hack: Single-line vertical centering

CSS Hack: Svislé centrování jednořádkového textu

If we have a block of given height, we may simply center a single line text inside it by setting text's line-height property to the same value as the block's height. Both heights must be given relative to the font-size (i. e. using the em units).

Máme-li blok dané výšky, jednořádkový text v něm snadno svisle vycentrujeme tak, že textu nastavíme vlastnost line-height na stejnou hodnotu, jako je výška bloku. Výšky však musí být zadány relativně k velikosti písma (např. pomocí jednotky em).

   #block {
      ...
      height: 5em;
      line-height: 5em;
      ...
      }
Lorem ipsum

The idea comes from the evolt.org's Ten CSS tricks you may not know.

Nápad pochází z článku Ten CSS tricks you may not know na evolt.org.