vertical-align property specifies the vertical alignment of inline elements and table cells (<td>).
This property applies to the following elements.
- Inline elements or elements which are given
display: inline-block. Inline elements include image, span, textarea, button, etc.
- Content of table cells or elements which are given
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.
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.
The following demo shows the change in vertical alignment of the image on giving it different
For table cell elements, it is better to use only the values
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.
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
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.
This property is supported in all the major browsers.