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

CSS Hack: Single-line vertical centering

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

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

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