How Does Vertical Alignment Actually Work in CSS?

Vertical Alignment in CSS: Understanding the Nuances

The vertical-align property allows you to position an inline element vertically within its parent element. However, its behavior can be unpredictable unless you grasp the underlying principles.

Inline Elements and Height

Vertical-align only affects inline elements. Elements such as

and

are block-level and not affected. For inline elements without an inherent line height, such as and , you need to explicitly set one using the line-height property.

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:

<div>
<p>To center the text vertically in #inner, apply vertical-align: middle to #header:</p>
<pre class="brush:php;toolbar:false">#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.