Sets the vertical alignment of your element, most often text. Vertical-align aligns the content that appears in an imaginary line. Examples of these lines are along a line of text or within a <td> of a table.

Value Description
vertical-values baseline - Align along baseline of surrounding text

sub - Aligns as if it were subscript

super - Aligns as if it were superscript

top - Aligns along the top of the element

text-top - Align with the top of surrounding text

bottom - Aligns along the bottom of the element

text-bottom - Align with the bottom of surrounding text

percentage - Align as a percentage of surrounding text.


td {
height: 80px;
vertical-align: bottom;

p { font-size: 20px;}

i {
font-size: 10px;
vertical-align: text-top;



This paragraph has text-top bold text inside of it!

Compatibility Issues:

Internet Explorer does not support the value "percentage".