What you need to know about CSS vertical alignment

Basic description of vertical align

The CSS vertical-align property sets the vertical position inside a line box of the boxes generated by an inline-level element.

The possible values include:

  • baseline (defaut) - Align the baseline of the box with the baseline of its parent.
    CSS vertical align - baseline
  • sub - Place the baseline of the box to the position for subscripts of the parent.
    CSS vertical align - sub
  • super - Place the baseline of the box to the position for superscripts of the parent.
    CSS vertical align - super
  • top - Place the top of the element with the top of the line box.
    CSS vertical align - top
  • text-top - Place the top of the box with the top of the parent's content.
    CSS vertical align - text-top
  • middle - Place the box in the middle of the parent.
    CSS vertical align - middle
  • bottom - Place the bottom of the element with the bottom of the line box.
    CSS vertical align - bottom
  • text-bottom - Place the bottom of the box with the bottom of the parent's content.
    CSS vertical align - text-bottom
  • <length> - Set a positive or negative value to raise or lower the box by the distance. The value '0cm' has same effect with the value of 'baseline'.
    CSS vertical align - length
  • <percentage> - Set a positive or negative value to raise or lower the box by the percentage of the 'line-height' value. The value '0%' has same effect with the value of 'baseline'.
    CSS vertical align - percentage
  • inherit - Has the same value as the property for the its parent.

Where to use the vertical align

The vertical-align CSS property applies to

  1. inline elements
  2. table-cell elements

The vertical-align is useful for inline and table-cell elements only. If you want to vertically align something inside a DIV, it won't work except the DIV is displayed as table-cell.

HTML code

Try it »

regular textsubscriptsuperscriptvalign=baseline

regular textsubscriptsuperscriptvalign=sub

regular textsubscriptsuperscriptvalign=super

regular textsubscriptsuperscriptvalign=text-top

regular textsubscriptsuperscriptvalign=text-bottom

regular textsubscriptsuperscriptvalign=middle

regular textsubscriptsuperscriptvalign=top

regular textsubscriptsuperscriptvalign=bottom

regular textsubscriptsuperscriptvalign=value

regular textsubscriptsuperscriptvalign=percent

CSS code

Try it »