totn CSS

CSS: vertical-align property

This CSS tutorial explains how to use the CSS property called vertical-align with syntax and examples.

Description

The CSS vertical-align property defines the vertical alignment of an inline element or table cell element.

Syntax

The syntax for the vertical-align CSS property is:

vertical-align: value;

Parameters or Arguments

value

The alignment of the text. It can be different values depending on whether the element is an inline element or a table-cell element.

Value for Inline Elements

When value is an inline element, it can be one of the following:

Value Description
top Top of the element and its descendants are aligned with the top of the entire line
img { vertical-align: top; }
bottom Bottom of the element and its descendants are aligned with the bottom of the entire line
img { vertical-align: bottom; }
baseline Baseline of the element is aligned with the baseline of its parent
img { vertical-align: baseline; }
sub Baseline of the element is aligned with the subscript-baseline of its parent
img { vertical-align: sub; }
super Baseline of the element is aligned with the superscript-baseline of its parent
img { vertical-align: super; }
text-top Top of the element is aligned with the top of the parent element's font
img { vertical-align: text-top; }
text-bottom Bottom of the element is aligned with the bottom of the parent element's font
img { vertical-align: text-bottom; }
middle Middle of the element is aligned with the middle of the lowercase letters in the parent element's font
img { vertical-align: middle; }
fixed Baseline of the element is aligned at a given fixed amount above the baseline of its parent
img { vertical-align: 5px; }
percentage Baseline of the element is aligned at a given percentage amount above the baseline of its parent (percentage of the line-height property)
img { vertical-align: 10%; }
inherit Element will inherit the vertical-align property from its parent element
img { vertical-align: inherit; }

Value for Table Cells

When value is a table cell, it can be one of the following:

Value Description
top Top padding edge of the cell is aligned with the top of the row
td { vertical-align: top; }
middle Center of the padding box of the cell is aligned within the row
td { vertical-align: middle; }
bottom Bottom padding edge of the cell is aligned with the bottom of the row
td { vertical-align: top; }
inherit Element will inherit the vertical-align property from its parent element
td { vertical-align: inherit; }

Note

  • The vertical-align property can be a negative value.
  • If the element does not have a baseline, the vertical-align property will use the margin edge instead.

Browser Compatibility

The CSS vertical-align property has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the vertical-align property below, exploring examples of how to use this property in CSS.

With Inline Elements

Let's look at a CSS vertical-align example with inline elements.

img { vertical-align: top; }

In this CSS vertical-align example, we have set the vertical-align property to top for the <img> tag.

With Table Cells

Next, let's look at a CSS vertical-align example where we left-align the text.

td { vertical-align: bottom; }

In this CSS vertical-align example, we have set the vertical-align property to bottom for the <td> tag.