BlogsDope image BlogsDope

CSS vertical-align

Dec. 22, 2017 CSS HTML EXAMPLE 1219

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: inline or display: 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.

line box with inline elements

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.

line box height

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.

inline elements placed on baseline

Values

baseline : Aligns the baseline of the element with the baseline of the line box. This is the default value.

vertical-align: baseline

<length> : Raises the element above baseline if length value is positive and lowers it below baseline if length value is negative.

vertical-align: 40pxvertical-align: -20px

<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.

vertical-align: 20%vertical-align: -20%

sub : Aligns the element with the baseline of subscript.

vertical-align: sub

super : Aligns the element with the baseline of superscript.

vertical-align: super

text-top : Aligns the top of the element with the top of the font of the parent element.

vertical-align: text-top

text-bottom : Aligns the bottom of the element with the bottom of the font of the parent element.

vertical-align: text-bottom

top : Aligns the top of the element with the top of the line box.

vertical-align: top

bottom : Aligns the bottom of the element with the bottom of the line box.

vertical-align: bottom

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.

vertical-align: middle

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 topbottom 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.


Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).