vertical-align

vertical-align controls baseline/line alignment for inline-level boxes and alignment within table cells. It does not align Grid tracks or Flexbox items, and center is not its ordinary centering keyword.

Align an inline badge with text

Middle aligns the badge’s midpoint with the parent’s baseline plus half its x-height. It is not the midpoint of the parent’s entire content box.

<p>A practice lesson <span class="badge">New</span> with an inline badge.</p>

p {
  font-size: 1.25rem;
  line-height: 2;
}
.badge {
  display: inline-block;
  vertical-align: middle;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  background: #dbeafe;
}

Center a cell’s content within a taller row

For table cells, middle centers the cell’s padding box within the row. The longer explanation makes the row tall enough to see the difference.

<table>
  <caption>
    Practice topics
  </caption>
  <tbody>
    <tr>
      <th scope="row">Grid</th>
      <td>
        Define the columns, change a track size, and compare the resulting
        layout at another width.
      </td>
    </tr>
  </tbody>
</table>

table {
  border-collapse: collapse;
  max-width: 100%;
}
th,
td {
  padding: 0.75rem;
  border: 1px solid #94a3b8;
}
th {
  vertical-align: middle;
}
td {
  max-width: 18ch;
  line-height: 1.6;
}

Values, defaults, and newer syntax

The traditional initial value is baseline and vertical-align is not inherited. Top/bottom align against the line box; text-top/text-bottom refer to the parent font. Sub/super shift a baseline without creating HTML subscript or superscript semantics. Lengths raise the baseline, with negative lengths lowering it; percentages use the element’s line-height.

Current specifications describe vertical-align as shorthand for alignment-baseline, baseline-source, and baseline-shift. New constituent syntax has separate implementation histories; established inline/table keywords remain the useful starting point. Table cells interpret several inline baseline values as baseline alignment.

Why it appears not to work

Vertical-align:center is invalid, and vertical-align on a block Grid container does not center its tracks or children. Use align-items or align-self for those layout contexts.

Use sub or sup when the text has that meaning. Learn line-height and table for the demonstrated contexts.

Sources and browser support

MDN: vertical-align describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.