vertical-align

Draft

Definition

The vertical-align CSS property is used to control the vertical alignment of inline or inline-block elements within a line of text or a containing element. It specifies how the element should align itself in relation to the surrounding content.

The vertical-align property accepts various values, including length units, percentage values, and keyword values. Here are some commonly used values:

  • baseline: Aligns the element’s baseline with the baseline of the parent element or the line of text.
  • top: Aligns the top of the element with the tallest element on the line or the top of the parent element’s content area.
  • middle: Aligns the middle of the element with the middle of the parent element’s content area.
  • bottom: Aligns the bottom of the element with the lowest element on the line or the bottom of the parent element’s content area.
  • text-top: Aligns the top of the element with the top of the parent element’s font.
  • text-bottom: Aligns the bottom of the element with the bottom of the parent element’s font.

Here’s an example:

.inline-element {
  vertical-align: middle;
}

In this example, the .inline-element class sets the vertical-align property to middle. This aligns the element vertically at the middle of the parent element’s content area.

It’s important to note that the vertical-align property affects inline or inline-block elements, such as text, images, or inline-level elements. It may not have any effect on block-level elements.

The vertical-align property is commonly used to align icons or images vertically within text, create vertical alignment of text within table cells, or adjust the vertical position of inline elements within a line of text.