CSS vertical-align Property

The vertical-align property specifies the vertical alignment of an inline element. 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
baseline Aligns the baseline of the element with the baseline of its parent. This is a default value.
length Raise (positive value) or lower (negative value) the box by this distance. Negative values are allowed.
sub Lower the baseline of the box to the proper position for subscripts of the parent's box.
super Raise the baseline of the box to the proper position for superscripts of the parent's box.
top Align the top of the aligned subtree with the top of the line box.
text-top Align the top of the box with the top of the parent's content area.
middle Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
bottom Align the bottom of the aligned subtree with the bottom of the line box.
text-bottom Align the bottom of the box with the bottom of the parent's content area.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.


Browser support

1.0+ 12.0+ 1.0+ 1.0+ 4.0+


Do you find this helpful?

Related articles