CSS vertical-align Property

CSS vertical-align property specifies the vertical alignment of an in-line element or table cell element.

Usages

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

Default value: baseline
Applies to: Inline elements, table-cell elements
Inherited: No
Version: CSS1
JavaScript Syntax: object.style.verticalAlign = "sub"

Syntax

Here is a syntax for the CSS vertical-align property

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

Property Values

The following table describes the values of this property.

Value Description
baseline Default/ The element is aligned with the baseline of the parent
length Length values (either positive or negative) raise or lower an element by the specified length
percentage Percentage values (either positive or negative) raise or lower an element in a percent of the line-height property
sub The element is aligned with the subscript baseline of the parent
super The element is aligned with the superscript baseline of the parent
top The element is aligned with the top of the element and its descendants with the top of the entire line
text-top The element is aligned with the top of the parent element font
middle The element is aligned with the middle of the parent element
bottom The element is aligned with the lowest element in the line
text-bottom The element is aligned with the bottom of the parent element font
initial Sets default value of this property
inherit Inherits this property from its parent element

Examples

The example below shows to sets vertical-align property.

img.one {
  vertical-align: baseline;
}
img.two {
  vertical-align: top;
}
img.three {
  vertical-align: text-top;
}
img.four {
  vertical-align: middle;
}
img.five {
  vertical-align: bottom;
}
img.six {
  vertical-align: text-bottom;
}
span.seven {
  vertical-align: sub;
} 
span.eight {
  vertical-align: super;
}

Run it...   »

Browser Compatibility

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

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.