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.