CSS vertical-align property

The CSS 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.

CSS Syntax

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

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
       <title>Title of the document</title>
       <style>
        span{vertical-align:sub}
       </style>
   </head>
   <body>

    <p>This is some paragraph with <span>vertical-align</span> property.</p>

  </body>
</html>

Let's see an 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>
      <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 This is default value. Aligns the baseline of the element with the baseline of its parent.
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.