CSS vertical-align Property

The vertical-align property specifies the vertical alignment of an inline, inline-block or table-cell box. Inline-level elements include images, text, buttons, etc.

This property works only in the following contexts:

  • To vertically align a content inside table cells (<td>) and elements with display: table-cell.
  • To vertically align the box of an inline element inside its line box. E.g. it can be used to vertically align <img> in a line of text.

We can’t use the vertical-align property to vertically align block-level elements.

Initial Value baseline
Applies to Inline-level and table-cell elements, also applies to ::first-letter and ::first-line.
Inherited No.
Animatable Yes. The vertical alignment is animatable.
Version CSS1
DOM Syntax object.style.verticalAlign = "middle";

Syntax

vertical-align: baseline | length | sub | super | top | text-top | middle | bottom|  text-bottom | initial | inherit;

Example of the vertical-align property with the "sub" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        vertical-align: sub;
      }
    </style>
  </head>
  <body>
    <h2>Vertical-align property example</h2>
    <p>This is some paragraph with
      <span>vertical-align</span> property.
    </p>
  </body>
</html>

Result

Example of the vertical-align property with the "middle" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <h2>Vertical-align property example</h2>
    <p>This is some paragraph with
      <span>vertical-align</span> property.
    </p>
  </body>
</html>

Example of the vertical-align property with the "super" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        vertical-align: super;
      }
    </style>
  </head>
  <body>
    <h2>Vertical-align property example</h2>
    <p>This is some paragraph with
      <span>vertical-align</span> property.
    </p>
  </body>
</html>

Example of the vertical-align property with the "top" and "bottom" values:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      table,
      th,
      td {
        border: 1px solid #cccccc;
      }
      td {
        height: 100px;
      }
      .top {
        vertical-align: top;
      }
      .bottom {
        vertical-align: bottom;
      }
    </style>
  </head>
  <body>
    <h2>Vertical-align property example</h2>
    <table>
      <tr>
        <th>Bottom</th>
        <th>Middle</th>
        <th>Top</th>
      </tr>
      <tr>
        <td class="bottom">Some text</td>
        <td>Some text</td>
        <td class="top">Some text</td>
      </tr>
    </table>
  </body>
</html>

Values

Value Descriptions Play it
baseline Aligns the baseline of the element with the baseline of its parent. This is a default value. Play it »
length Raise (positive value) or lower (negative value) the box by this distance. Negative values are allowed. Play it »
sub Lower the baseline of the box to the proper position for subscripts of the parent's box. Play it »
super Raise the baseline of the box to the proper position for superscripts of the parent's box. Play it »
top Align the top of the aligned subtree with the top of the line box. Play it »
text-top Align the top of the box with the top of the parent's content area. Play it »
middle Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent. Play it »
bottom Align the bottom of the aligned subtree with the bottom of the line box. Play it »
text-bottom Align the bottom of the box with the bottom of the parent's content area. Play it »
initial It makes the property use its default value. Play it »
inherit It inherits the property from its parents element.


Browser support

1.0+ 1.0+ 1.0+ 4.0+


Do you find this helpful?

Related articles