CSS vertical-align property
Description
It aligns an inline-level box vertically.
A line box is an inline-level box that consists of stack of lines. We'll use the keyword line box which means it consits of text lines or inline-level elements.
The baseline of the parent box is at the middle.
Syntax
vertical-align : baseline | text-bottom | middle | text-top | top | bottom | sub | super | length | percentage
Property values
baselineDefault
-
The baseline of line box (other than the target line box) matches the baseline of the parent box.
vertical-align: baseline;
text-bottom
-
The bottom side of the line box (other than the target line box) matches with the bottom side of the parent box.
vertical-align: text-bottom;
middle
-
The line box (other than the target line box) is aligned at the middle (verticallly).
vertical-align: middle;
text-top
-
The top side of the line box (other than the target line box) matches with the top side of the parent box.
vertical-align: text-top;
top
-
The line-box (other than the target line box) is at the top side of the parent box.
vertical-align: top;
bottom
-
The line-box (other than the target line box) is at the top side of the parent box.
vertical-align: bottom;
+ve length
-
The line box (other than the target line box) moves downwards from the baseline by 10px.
vertical-align: 10px;
-ve length
-
The line box (other than the target line box) moves upwards from the baseline by 10px.
vertical-align: -10px;
percentage
-
The line box (other than the target line box) moves upwards from the baseline by 20% of the height of the parent box.
vertical-align: 20%;
sub
-
In this case, the target line box is a subscript of the other text.
vertical-align: sub;
super
-
In this case, the target line box is a superscript of the other text.
vertical-align: super;
Applicable to
It applies to all elements
From web4college, the free CSS digger
Other text Target text
Bookmark this page
Ctrl+D
