vertical-align

by

Vertical-align controls the vertical alignment of an inline element within its containing block. It applies to inline elements, inline-block elements, and table cells.

Syntax

vertical-align: value;

Values

  • baseline: Aligns the baseline of the element with the baseline of the parent element. This is the default value.
  • sub: Aligns the bottom edge of the element with the subscript baseline of the parent element.
  • super: Aligns the bottom edge of the element with the superscript baseline of the parent element.
  • top: Aligns the top edge of the element with the top edge of the parent element.
  • bottom: Aligns the bottom edge of the element with the bottom edge of the parent element.
  • middle: Centers the element vertically within the parent element.
  • text-top: Aligns the top edge of the element with the top edge of the tallest line of text in the parent element.
  • text-bottom: Aligns the bottom edge of the element with the bottom edge of the tallest line of text in the parent element.

Example

<p>This is a line of text with <span style="vertical-align: sub;">subscript</span> and <span style="vertical-align: super;">superscript</span> text.</p>

Additional Notes

  • vertical-align only affects inline elements and inline-block elements within their containing block.
  • For block elements, use margin-top, margin-bottom, or padding-top and padding-bottom to control vertical alignment.
  • When using vertical-align on images, the baseline of the image is considered to be the bottom edge of the image.
  • The vertical-align property can also be applied to table cells to control the vertical alignment of their content.

Example with table cells

<table>
  <tr>
    <td>Cell 1</td>
    <td style="vertical-align: middle;">Cell 2</td>
    <td>Cell 3</td>
  </tr>
</table>