CSS vertical-align Property

Definition and Usage

The vertical-align property sets the vertical alignment of an inline, inline-block, or table-cell box. Use it to sit an icon next to text, or to place content inside a table cell.

It does not align ordinary block boxes (such as a plain div). For flex or grid, prefer align-items. The initial value is baseline. It is not inherited.

CSS Syntax

Also: sub, super, text-top, text-bottom. Example: vertical-align: middle;

Property Values

How to Use vertical-align

Apply it to an inline-level or table-cell element, then pick a keyword that matches the look you want.

1. Confirm the element is inline, inline-block, or a table cell (display).
2. Set vertical-align on that element (not on a wrapping block alone).
3. For icons beside text, start with middle.
4. For table cells, use top, middle, or bottom on the cell.

Live Preview

The blue box is inline-block. Change vertical-align and watch it move relative to the text.

CSS Examples

Each snippet focuses on vertical-align. Extra styles stay minimal for study. Use Try It Yourself for a live editor.

<style>
  span {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: #2563eb;
    vertical-align: middle;
  }
</style>

<p>Label <span></span> text</p>

<style>
  span {
    display: inline-block;
    width: 24px;
    height: 40px;
    background: #2563eb;
    vertical-align: baseline;
  }
</style>

<p>Label <span></span> text</p>

<style>
  td {
    height: 80px;
    vertical-align: middle;
    border: 1px solid #ccc;
  }
</style>

<table>
  <tr>
    <td>Centered</td>
  </tr>
</table>

Key Takeaways