CSS 2.1 Reference: vertical-align Property

The vertical-align property is used to control the vertical positioning of an inline-level element within a line box or the vertical positioning of a table cell within a table row.

• Inline-level element within a line box:
  • This property is specified by using a length, percentage, or keyword, according to the syntax shown above. Negative values are permitted. If a percentage value is used, the value will be a percentage of the line-height value. Specifying a length or percentage value of 0 is the same as specifying the keyword baseline.
• Table cell within a table row:
  • This property is specified by using a keyword according to the syntax shown above. The keywords sub, super, text-top, text-bottom as well as length and percentage values do not apply.

CSS Example: The vertical-align properties are set to middle, sub, and super.

  #tst1 {font-size: 50px;
         vertical-align: middle;
  }
  #tst2 {vertical-align: sub;}
  #tst3 {vertical-align: super;}

• Keywords for an inline-level element within a line box:
  • baseline - Align the element's baseline with the parent element's baseline. If the element does not have a baseline, then align the element's bottom margin with the parent element's baseline.
  • sub - Lower the element's baseline relative to the parent element's baseline to create subscript positioning.
  • super - Raise the element's baseline relative to the parent element's baseline to create superscript positioning.
  • top - Align the highest of the tops of the subtree boxes with the top of the inline box.
  • text-top - Align the top of the element's box with the top of the parent element's content area.
  • middle - Align the element's vertical midpoint with the parent element's baseline plus half of the parent element's x-height (the x-height is often the height of a lowercase x).
  • bottom - Align the lowest of the bottoms of the subtree boxes with the bottom of the inline box.
  • text-bottom - Align the bottom of the element's box with the bottom of the parent element's content area.
  • inherit - The inherit keyword is used to specify that the value for this property should be taken from the parent element. If inherit is used with the root element, then the initial value for this property will be used.

• Keywords for a table cell within a table row:
  • baseline - Align the cell's baseline with the row's baseline.
  • top - Align the top of the cell's content (cell box) with the top of the row.
  • middle - Align the middle of the cell's content (cell box) with the middle of the row.
  • bottom - Align the bottom of the cell's content (cell box) with the bottom of the row.
  • inherit - The inherit keyword is used to specify that the value for this property should be taken from the parent element. If inherit is used with the root element, then the initial value for this property will be used.