vertical-align Description:
The vertical-align property defines the alignment of the element's content vertically on the line.
vertical-align in CSS Versions:
vertical-align Syntax:
vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
- baseline
Align the baseline (bottom) of the element with the baseline of the parent. - sub
Make the element a subscript. - super
Make the element a superscript.
- top
Align the top of the element with the tallest element on the line. - text-top
Align the top of the element with the parent element's font. - middle
Align the vertical midpoint of the element with the baseline plus half the x-height of the parent. - bottom
Align the bottom of the element with the lowest element on the line.
- text-bottom
Align the bottom of the element with the bottom of the parent element's font. - percentage
Refers to the value of the line-height property of the element. It raises the baseline or bottom of the element by the specified amount above the baseline of the parent. ] - length
A specific length. - inherit
The element should have the same vertical-align setting as the parent.
vertical-align Initial Value:
vertical-align Inheritance:
This property is not inherited.
vertical-align Browser Support:
vertical-align Examples:
Try these in your HTML editor:
subscripted text
<p>
Water is H<span style="vertical-align: sub;">2</span>O
</p>super-scripted text
<p>
This is the 2<span style="vertical-align: super;">nd</span> example.
</p>vertical-align Special Notes:
- Negative values for percentages are permitted, and will cause the element to be below the parent's baseline, rather than above.
- Some browsers don't support any values but "sub" and "super".
