The CSS vertical align property is used to define the vertical alignment of an inline or table-cell box. It is the one of the self-explanatory property of CSS. It is not very easy property for beginners.
The vertical-align property in CSS is used to specify the vertical alignment of the table-box or inline element.
Note:
This property is mostly used to align images to it’s corresponding text.
This property can also be used to align the cells inside tables.
The vertical-align property cannot be used for the alignment of block level elements like p, ol, ul, h1, div etc.
Property Values:
baseline: It aligns the element baseline corresponding to the baseline of the parent. This might vary according to the browser. It is the default value.
sub: It aligns the element baseline corresponding to the subscript-baseline of its parent.
super: It aligns the element baseline corresponding to the superscript-baseline of its parent.
text-top: It aligns the element top corresponding to the top of the parent’s font.
text-bottom: Align the element’s bottom corresponding to the bottom of the parent’s font.
middle: Aligns the element’s middle corresponding to the middle of the parent.
top: Aligns the element’s top corresponding to the top of the tallest element on it’s line.
bottom: Aligns the element’s bottom corresponding to the top of the shortest element on it’s line.
length: Aligns the baseline of the element to the given length above the baseline of its parent. A negative value is allowed.
percentage: Aligns the element’s baseline corresponding to the given percentage above the baseline of its parent, with the value being a percentage of the line-height property.
initial: Initializes the value to the default value.
inherit: Inherits the value from the parent element.