CSS Vertical Align

CSS Vertical Align Property

The CSS vertical-align property is used to vertically align inline elements, inline-block elements, and table cell contents within their containing element. It controls the vertical positioning of an element relative to its parent or surrounding text. The default value of vertical-align is baseline.

This property is particularly useful for aligning text with images, creating superscripts and subscripts, and positioning elements in complex layouts. It can accept keyword values like baseline, middle, top, bottom, super, and sub, as well as length values (px, em) and percentages.

Let's explore the different values of vertical-align with interactive examples below.

Syntax

vertical-align: baseline | bottom | middle | top | super | sub | length | percentage | inherit | initial;

Where:

• baseline: Aligns the baseline of the element with the baseline of the parent (default)
• bottom: Aligns the bottom of the element with the lowest element on the line
• middle: Aligns the middle of the element with the middle of lowercase letters in the parent
• top: Aligns the top of the element with the tallest element on the line
• super: Raises the element to superscript position
• sub: Lowers the element to subscript position
• length: Raises or lowers by a specified length (e.g., 10px, 2em)
• percentage: Raises or lowers by a percentage of the line-height

vertical-align: baseline

vertical-align: baseline is the default value. It aligns the baseline of the element with the baseline of its parent element. This is the standard alignment for text and inline elements.

  <style>
  h1 small{
    vertical-align:baseline;
  }
  </style>
  <h1>Vertical align <small>baseline</small> </h1>

vertical-align: bottom

vertical-align: bottom aligns the bottom of the element with the bottom of the lowest element on the line. This is useful for aligning elements to the descender line of text.

    <style>
    h1 small{
      vertical-align:bottom;
    }
    </style>
    <h1>Vertical align <small>bottom</small> </h1>
  

vertical-align: middle

vertical-align: middle aligns the middle of the element with the middle of lowercase letters (like 'x') in the parent element. This is commonly used for centering images or icons with text.

<style>
h1 small{
  vertical-align:middle;
}
</style>
<h1>Vertical align <small>middle</small> </h1>

vertical-align: top

vertical-align: top aligns the top of the element with the top of the tallest element on the line. This ensures the element is positioned at the highest point of the line box.

<style>
h1 small{
  vertical-align:top;
}
</style>
<h1>Vertical align <small>top</small> </h1>

vertical-align: super

vertical-align: super raises the element to the superscript position, similar to the <sup> HTML tag. This is useful for mathematical expressions or footnotes.

<style>
h1 small{
  vertical-align:super;
}
</style>
<h1>Vertical align <small>super</small> </h1>

vertical-align: sub

vertical-align: sub lowers the element to the subscript position, similar to the <sub> HTML tag. This is commonly used in chemical formulas or mathematical notations.

<style>
h1 small{
  vertical-align:sub;
}
</style>
<h1>Vertical align <small>sub</small> </h1>

Length and Percentage Values

In addition to keyword values, vertical-align can accept length values (like px, em) and percentages. Positive values raise the element, while negative values lower it.

Example with Length

<style>
.raised { vertical-align: 5px; }
.lowered { vertical-align: -5px; }
</style>
<p>This text has a <span class="raised">raised element</span> and a <span class="lowered">lowered element</span>.</p>
  

Example with Percentage

<style>
.percent-up { vertical-align: 20%; }
.percent-down { vertical-align: -20%; }
</style>
<p>Percentage values: <span class="percent-up">up</span> and <span class="percent-down">down</span>.</p>
  

Practical Examples

Aligning Images with Text

A common use case is aligning images vertically with text.

Table Cell Alignment

Vertical-align also works on table cells.

Browser Support

The vertical-align property is supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. It has been part of CSS since CSS 1.