Vertical Align

Published: August 26, 2015By brooklynwriters
  • Text Align
  • Text Indent
  • Text Transform
  • Word Spacing
  • Letter Spacing
  • Word Wrap
  • White Space
  • Text Direction
  • Vertical Align

The vertical-align property sets the vertical alignment of an element. Elements with a 'display' value of 'block' ignore the vertical-align property, but their inline children (if any) will inherit the vertical-align value. Tip: if you set the 'display' property to 'table-cell' you may find that vertical-align works in the way you expect (the same goes for applying vertical align on actual table cells). This tutorial on vertical-align is worth reading.

Value Description
baselineAlign the baseline of the element with the baseline of the parent element. This is default
lengthRaises or lower an element by the specified length. Negative values are allowed
%Raises or lower an element in a percent of the 'line-height' property. Negative values are allowed
subAligns the element as if it was subscript
superAligns the element as if it was superscript
topThe top of the element is aligned with the top of the tallest element on the line
text-topThe top of the element is aligned with the top of the parent element's font
middleThe element is placed in the middle of the parent element
bottomThe bottom of the element is aligned with the lowest element on the line
text-bottomThe bottom of the element is aligned with the bottom of the parent element's font

Themeover CSS Reference

Close