CSS vertical-align Property

The vertical-align property specifies the vertical alignment of an inline element.

The vertical-align property works only on inline or inline-block elements and table cells. Inline-level elements include images, text, buttons, etc.

The vertical-align property is used to align content inside table cells (<td>) and elements with display: table-cell.

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

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

Here, "middle" value is used:

Example

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

Another example with "super" value:

Example

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

An example which shows how "top" and "bottom" values work:

Example

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

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




Related articles