CSS PROPERTIES
Expand All | Collapse All
CSS AT-RULES

CSS vertical-align Property

Topic: CSS3 Properties ReferencePrev|Next

Description

This vertical-align CSS property controls the vertical alignment of boxes generated by an inline-level element (usually text and images) with respect to the text baseline within a block-level box, or of table cells within a row.

The following table summarizes the usages context and the version history of this property.

Default value: baseline
Applies to: Inline-level and table-cell elements
Inherited: No
Animatable: Yes. See animatable properties.
Version: CSS 1, 2, 3

Syntax

The syntax of the property is given with:

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

The example below shows the vertical-align property in action.

img {
    vertical-align: middle;
}
span {
    vertical-align: super;
}

Property Values

The following table describes the values of this property.

Value Description
baseline Align the baseline of the element's box with the baseline of the parent box.
sub Lower the baseline of the box to the position suitable for subscripts of the parent's box.
super Raises the baseline of the box to the position suitable for superscripts of the parent's box.
top Align the top of the element and its descendants with the top of the line box.
text-top Align the top of the element with the top of the parent element's font.
middle Align the middle of the element with the point that's half the parent's x-height above the baseline of the parent box.
bottom Align the bottom of the element and its descendants with the bottom of the line box.
text-bottom Align the bottom of the element with the bottom of the parent element's font.
length A length value in px, pt, cm, em, etc. Length values raise (positive value) or lower (negative value) the box by this distance from the baseline of its parent. The value 0px is same as baseline.
percentage Raise (positive value) or lower (negative value) the box by this distance (a percentage of the line-height value). The value 0% is same as baseline.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element vertical-align property.

Browser Compatibility

The vertical-align property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 4+
  • Apple Safari 1+
  • Opera 4+

Further Reading

See tutorial on: CSS Alignment.

Related properties: line-height.

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties