Height and Vertical Alignment

The parent element's height must have a static value (i.e., not auto or percentage). If the height is not specified, the browser will calculate it based on the content, which can lead to unexpected results.

Positioning Inline Elements

Contrary to text-align, which applies to the block-level containing element, vertical-align should be applied to the inline element you want to position.

Browser Differences

Older browsers may not support vertical-align consistently. Modern browsers, however, handle it well, even when used on non-inline elements.

Example: Centering Text

For instance, suppose you have the following HTML:

To center the text vertically in #inner, apply vertical-align: middle to #header:
#header {
  display: inline-block;
  line-height: 1em;
  margin: 0;
  vertical-align: middle;
}
Note that in this example, #inner is an inline-block element with a fixed height.