The vertical-align property specifies the vertical positioning of an inline content box.

  • Initial valuebaseline
  • Applies toInline level and table cells
  • InheritedNo
  • MediaVisual
  • Computed valueFor percentage and length values, the absolute length, otherwise the keyword as specified
  • AnimatableNo
  • CSS VersionCSS1, CSS2, CSS3
  • JavaScript syntaxobject.style.verticalAlign
Formal syntax: auto | use-script | baseline | sub | super | top | text-top | central | middle | bottom | text-bottom | <percentage> | <length>

vertical-align: [value];
vertical-align: 5em;         /* Length values */
vertical-align: 10px;
vertical-align: 20%;         /* Percentage value */
  • <percentage>Raise (positive value) or lower (negative value) the box by this distance (a percentage of the computed 'line-height' of the element). The value '0%' means the same as 'baseline'.
  • <length>Raise (positive value) or lower (negative value) the box by this distance. The value '0cm' means the same as 'baseline'.
  • baselineAligns the baseline of the element with the baseline of its parent. The baseline of some replaced elements, like <textarea> is not specified by the HTML specification, meaning that their behavior with this keyword may change from one browser to the other.
  • bottomAlign the bottom of the element and its descendants with the bottom of the entire line.
  • middleAlign the middle baseline of the inline element with the middle baseline of the parent.
  • subAligns the baseline of the element with the subscript-baseline of its parent.
  • superAligns the baseline of the element with the superscript-baseline of its parent.
  • text-bottomAligns the bottom of the element with the bottom of the parent element's font.
  • text-topAligns the top of the element with the top of the parent element's font.
  • topAlign the top of the element and its descendants with the top of the entire line.
  • inherit
.class {
   vertical-align: top;
}
1+Firefox6+Explorer1+Chrome1+Safari8+Opera


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.