CSS vertical-align Property

❮ Prev Next ❯

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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.