The vertical-align property specifies the vertical alignment of inline elements and table cells (<td>).
CSS
vertical-align: value;
This property applies to the following elements.
- Inline elements or elements which are given
display: inlineordisplay: inline-block. Inline elements include image, span, textarea, button, etc. - Content of table cells or elements which are given
display: table-cell.
Before moving further, you need to understand what a line box is.
A line box can be understood as a rectangular box which contains several inline boxes containing inline elements. In the following figure, the line box contains two inline elements - an image and some text.
Suppose the height of a line box is 25px and the font size of the text contained in it is 17px. In that case, the text would cover 17px of the height of the line box and the rest of the space (8px) would be divided equally at the top and bottom of the line of text. The line box height can be specified using the line height property.
Normally, inline elements which are next to each other are placed on the baseline of the line box which contains them. Notice the image and the text aligned at the baseline of the line box.
Values
baseline : Aligns the baseline of the element with the baseline of the line box. This is the default value.
<length> : Raises the element above baseline if length value is positive and lowers it below baseline if length value is negative.
<percentage> : Raises the element above baseline if percentage value is positive and lowers it below baseline if percentage value is negative. The amount of shift is specified as a percentage of line-height (height of line box) value.
sub : Aligns the element with the baseline of subscript.
super : Aligns the element with the baseline of superscript.
text-top : Aligns the top of the element with the top of the font of the parent element.
text-bottom : Aligns the bottom of the element with the bottom of the font of the parent element.
top : Aligns the top of the element with the top of the line box.
bottom : Aligns the bottom of the element with the bottom of the line box.
middle : Aligns the vertical middle point of the element with the baseline of the line box plus half the x-height (height of lowercase x of font used) of the line.
initial : Sets the default value of the property.
inherit : Inherits the value from parent element.
Examples
The following demo shows the change in vertical alignment of the image on giving it different vertical-align values.
See the Pen vertical-align property values by Aakhya Singh (@aakhya) on CodePen.
For table cell elements, it is better to use only the values top, bottom and middle, because other values might not show the expected behaviour. The default value for a <td> element is middle. The following example shows the change in vertical alignment of different table cell contents.
See the Pen Vertically aligning content of table cells by Aakhya Singh (@aakhya) on CodePen.
Vertically aligning content of block-level elements
As stated earlier, the vertical-align property aligns content of only inlineand inline-block elements. However, this property can be used to align the content of block-level elements by giving it display: table-cell.
The default value for a block-level element with display: table-cell is top. Look at the following example.
See the Pen vertically aligning content of block-level elements by Aakhya Singh (@aakhya) on CodePen.
Browser Support
This property is supported in all the major browsers.
