Definition and Usage

The vertical-align property specifies the vertical alignment of inline-level and table-cell elements.
It allows you to align elements to the top, middle, bottom, and other positions.

This property can be used in the following two contexts:

  • When applied to inline-level elements, it allows you to vertically align the element within a line box.
    For example, it can be used to vertically position an image within a line of text.
  • When applied to table-cell elements, it enables vertical alignment of the cell’s content.

Note:
This property cannot be used to vertically align block-level elements.

Terminology Reference for Better Understanding

Inline-Level Elements

Elements that do not start on a new line in the document but remain within the current line. Examples include emphasized text within a sentence or images inserted into text. From a styling perspective, these are elements that do not force a line break before or after them.

Inline-level elements can also be created by setting the CSS display property to inline-related values such as inline, inline-block, inline-table, inline-flex, or inline-grid.

Table-Cell Elements

Refers to the HTML <td> and <th> elements.
Table-cell elements can also be created by setting the CSS display property to table-cell.

Line Box

A conceptual container that wraps content included in a single line, such as text, within a block-level box in the flow of the document.

Block-Level Elements

Unless they are flex or grid items, these elements form a separate visual block and force line breaks before and after them. In simple terms, these are elements that start on a new line in a web page, such as paragraphs, lists, and tables.

Block-level elements can also be created by setting the CSS display property to block-related values such as block, list-item, table, flex, or grid.

Try the Demo

CSS Demo: vertical-align Click the demo button to see the vertical alignment of star in action!

The vertical-align property sets vertical alignment, while the text-align property sets horizontal alignment.

Formal syntax

CSS 
selector {
    vertical-align: /* value */
}

Syntax

CSS 
/* Keyword values */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* <length> values */
vertical-align: 0.5em;
vertical-align: -3px;

/* <percentage> values */
vertical-align: 2%;
vertical-align: -3.2%;

/* Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: revert-layer;
vertical-align: unset;

Formal definition

Formal definition of the vertical-align property
Initial value inline-level elements: baseline
table-cell elements: inherit
Applies to inline-level and table-cell elements.
Inherited no

According to the official specification (https://drafts.csswg.org/css2/#propdef-vertical-align), the initial value is baseline. However, major browsers apply different initial values for inline-level and table-cell elements. For reference, major browsers follow the Appendix D. Default style sheet for HTML 4.

Values

The vertical-align values have different meanings for inline-level and table-cell elements.

Values for Inline-Level Elements

baseline

Initial value. Aligns the bottom of the element with the baseline of the line box. If there is no baseline, it aligns with the bottom edge of the line box. The baseline of some <textarea> and other replaced elements may behave differently across browsers and may not follow the specification exactly.

baseline

The baseline is the line upon which most letters "sit," such as in lowercase letters like g, j, q in English. Characters in languages such as Japanese or Southeast Asian scripts do not extend below the baseline.

middle

Aligns the element vertically to the midpoint (0.5ex) of the line box's text x-height.

x-height

x-height refers to the height of the lowercase "x". x-height = 1ex.

sub

Aligns the element to the subscript baseline of the line box. This value does not affect the font size of the element.

super

Aligns the element to the superscript baseline of the line box. This value does not affect the font size of the element.

text-top

Aligns the top of the element with the top of the text in the line box.

text-bottom

Aligns the bottom of the element with the bottom of the text in the line box.

<length>

A length value. Moves the element up (positive value) or down (negative value) relative to the baseline of the line box. A value of 0cm is equivalent to the baseline.

<percentage>

A percentage (%) value. Moves the element up (positive) or down (negative) relative to the baseline of the line box. The percentage is based on the line-height property. A value of 0% is equivalent to the baseline.

top

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

The top edge of the line box refers to the highest point visible when the line box itself has a background color.

bottom

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

The bottom edge of the line box refers to the lowest point visible when the line box itself has a background color.

Values for Table-Cell Elements

Note:
The initial value for table-cell elements is not baseline. For <td> and <th> elements, the vertical-align property defaults to inherit (inherits the value from the parent). For <thead>, <tbody>, and <tfoot>, the initial value is middle, which is inherited to implement middle alignment.

baseline,
sub,
super,
text-top,
text-bottom,
<length>,
<percentage>

The baseline of table-cell elements is not set separately; it is aligned with the baselines of all other cells in the same row.

top

Aligns the top of the element with the bottom edge of the cell's padding-top.

middle

Vertically centers the element within the cell's padding-box.

bottom

Aligns the bottom of the element with the top edge of the cell's padding-bottom.

Various Examples

To properly understand the vertical-align property, it is essential to understand its values. Let's look at various examples using different vertical-align values.

Values for Inline-Level Elements

For convenience, the following HTML code will be used across examples:

HTML 
<p style="font-size: 3em; background-color: silver;">
    <img class="icon" src="star.svg" alt="star"> English
</p>

vertical-align: baseline

Initial value. Aligns the bottom of the element with the baseline of the line box.

CSS 
.icon {
    vertical-align: baseline;
}
Rendered Output

vertical-align: middle

Vertically centers the element relative to the midpoint (0.5ex) of the line box's text x-height. The x-height refers to the height of the lowercase "x". x-height = 1ex.

CSS 
.icon {
    vertical-align: middle;
}
Rendered Output

Note:
Despite the name "middle," it may not appear perfectly centered relative to the top and bottom of the text in some fonts. For English text, the icon generally appears centered. Remember, this middle value is based on English text.

vertical-align: sub

Aligns the element to the subscript baseline of the line box. This value does not affect the element's font size.
In HTML, a <sub> tag would appear at this position.

CSS 
.icon {
    vertical-align: sub;
}
Rendered Output

vertical-align: super

Aligns the element to the superscript baseline of the line box. This value does not affect the element's font size.
In HTML, a <sup> tag would appear at this position.

CSS 
.icon {
    vertical-align: super;
}
Rendered Output

vertical-align: text-top

Aligns the top of the element with the top of the text in the line box.

CSS 
.icon {
    vertical-align: text-top;
}
Rendered Output

Note:
The element may not align perfectly with the text top due to font design characteristics such as internal spacing and padding.

vertical-align: text-bottom

Aligns the bottom of the element with the bottom of the text in the line box.

CSS 
.icon {
    vertical-align: text-bottom;
}
Rendered Output

Note:
The element may not align perfectly with the text bottom due to font design characteristics. In languages like Japanese, which have no characters extending below the baseline, the alignment may appear different.

vertical-align: <length>

A length value. Moves the element up (positive) or down (negative) relative to the baseline of the line box.
A value of 0px is equivalent to the baseline.

vertical-align: 0
CSS 
.icon {
    vertical-align: 0; /* same as baseline */
}
Rendered Output
vertical-align: 10px
CSS 
.icon {
    vertical-align: 10px; /* moves up by 10px */
}
Rendered Output
vertical-align: -10px
CSS 
.icon {
    vertical-align: -10px; /* moves down by 10px */
}
Rendered Output

vertical-align: <percentage>

A percentage value. Moves the element up (positive) or down (negative) relative to the baseline of the line box. The percentage is relative to the line-height.
A value of 0% is equivalent to the baseline.

vertical-align: 10%
CSS 
.icon {
    vertical-align: 10%; /* moves up by 10% */
}
Rendered Output
vertical-align: -10%
CSS 
.icon {
    vertical-align: -10%; /* moves down by 10% */
}
Rendered Output

vertical-align: top

Aligns the top of the element with the top edge of the line box. The top edge refers to the highest point visible when the line box itself has a background color.

CSS 
.icon {
    vertical-align: top;
}
Rendered Output

vertical-align: bottom

Aligns the bottom of the element with the bottom edge of the line box. The bottom edge refers to the lowest point visible when the line box itself has a background color.

CSS 
.icon {
    vertical-align: bottom;
}
Rendered Output

Values for Table-Cell Elements

The initial value for table-cell elements is NOT baseline.

The <td> and <th> elements, which are table-cell elements, have an initial vertical-align value of inherit (meaning they inherit the value from their parent). The table row element <tr> also has an initial value of inherit.

The <thead>, <tbody>, and <tfoot> elements have an initial vertical-align value of middle, and table cells inherit this value to implement middle alignment.

Below is an example illustrating the initial vertical-align values for table-cell elements:

CSS 
table {
    width: 100%;
}
table, tr, th, td {
    border: 1px solid;
}
th, td {
    padding: 20px;
}
.cell {
    background-color: silver;
}
HTML 
<table>
    <tbody> <!-- initial vertical-align: middle -->
        <tr> <!-- initial vertical-align: inherit -->
            <td>td<br>td<br>td</td> <!-- initial vertical-align: inherit -->
            <th class="cell">td</th> <!-- initial vertical-align: inherit -->
            <td>td<br>td<br>td</td> <!-- initial vertical-align: inherit -->
        </tr>  
    </tbody>
</table>
Rendered Output

When rendered, you can see that the vertical-align of the cell with a silver background (.cell) is implemented as middle.

Note that if you do not explicitly set vertical-align on table-cell elements, the initial value differs from the baseline used for inline-level elements.

Browser compatibility

Browser compatibility for the vertical-align property
Property
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
vertical-align 1 12 1 1

Specifications

Specification for the vertical-align property
Specification
vertical-align CSS Inline Layout Module Level 3
#propdef-vertical-align

References

See also