CSS Vertical Align

The CSS vertical-align property is used to vertically align inline-level or inline-block elements within their containing parent. It affects how the element is positioned relative to the baseline of the surrounding text or inline-level elements.

It’s important to note that vertical-align works only on inline-level or inline-block elements. For block-level elements, you would typically use other layout techniques such as Flexbox or Grid to control vertical alignment.

The syntax for the vertical-align property is as follows:

selector {
  vertical-align: value;
}

• selector: Represents the CSS class or selector of the inline-level or inline-block element.
• value: Specifies the vertical alignment. It can take one of the following values:
• baseline: Aligns the element’s baseline with the baseline of the parent element.
• top: Aligns the top of the element with the top of the tallest inline-level element within the line box.
• middle: Aligns the element vertically in the middle of the line box.
• bottom: Aligns the bottom of the element with the bottom of the line box.
• 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.
• sub: Aligns the element as a subscript. It lowers the element to a position below the baseline.
• super: Aligns the element as a superscript. It raises the element to a position above the baseline.

Example:

span {
  vertical-align: middle;
}

In this example, the <span> element will be vertically aligned in the middle of its containing line box.

Keep in mind that the vertical-align property is sensitive to the context in which it is used. For instance, when applied to an image or inline-level element inside a block-level element, the alignment may appear differently based on the surrounding content and the line height.

Additionally, vertical-align is not designed to be used for vertical alignment of block-level elements within a container. For that purpose, Flexbox or Grid layout should be used.

Overall, vertical-align is most commonly used for aligning inline-level elements like images, icons, and text within their line boxes and is useful for small adjustments to vertical alignment within text content.