CSS vertical-align Property

vertical-align defines the vertical alignment for the content of a table cell or for an inline element against the rest of the inline flow.

vertical-align can take a % or length value, or it can take one of the following 8 keywords:

  • baseline: The default. Baseline of the element aligned to the baseline of the parent.
  • bottom: Bottom of the element aligned to the complete bottom of the line.
  • middle: Middle of the element aligned to half the x-height of the parent. The x-height is the height of the text without the character ascenders or descenders.
  • sub: Baseline of the element aligned to the subscript baseline of the parent.
  • super: Baseline of the element aligned to the superscript baseline of the parent.
  • text-bottom: Bottom of the element aligned to the bottom of the text.
  • text-top: Top of the element aligned to the top of the text.
  • top: Top of the element aligned to the top of the line.

If a length value is provided, the element is aligned at the specified length above the baseline of the parent.

If a % value is provided, the element is aligned at the specified % above the baseline of the parent, with the % being a reference to the line-height.

Here’s an example using vertical-align:

.avatar {
  vertical-align: middle;
}

Showcase

It can be hard to imagine the effects of the different keyword values for vertical-align, so here are examples with an inline image placed with different values:

vertical-align: baseline

Lee belaying pin Plate Fleet baseline example trysail swab hulk lugger bounty parrel Buccaneer.

vertical-align: bottom

Lee belaying pin Plate Fleet bottom example trysail swab hulk lugger bounty parrel Buccaneer.

vertical-align: middle

Lee belaying pin Plate Fleet middle example trysail swab hulk lugger bounty parrel Buccaneer.

vertical-align: sub

Lee belaying pin Plate Fleet sub example trysail swab hulk lugger bounty parrel Buccaneer.

vertical-align: super

Lee belaying pin Plate Fleet super example trysail swab hulk lugger bounty parrel Buccaneer.

vertical-align: text-bottom

Lee belaying pin Plate Fleet text-bottom example trysail swab hulk lugger bounty parrel Buccaneer.

vertical-align: text-top

Lee belaying pin Plate Fleet text-top example trysail swab hulk lugger bounty parrel Buccaneer.

vertical-align: top

Lee belaying pin Plate Fleet top example trysail swab hulk lugger bounty parrel Buccaneer.

  Tweet It
✖ Clear

πŸ•΅ Search Results

πŸ”Ž Searching...