The CSS vertical align attribute is employed to specify the vertical positioning of an inline or table-cell container. It stands out as a straightforward CSS property that may present challenges for individuals new to coding.
What it does
- It is applied to inline or inline-block elements.
- It affects the alignment of the element, not its content. (except table cells)
- When it applied to the table cells, it affect the cell contents, not the cell itself.
CSS Vertical Align Values
| value | description |
|---|---|
| baseline | It aligns the baseline of element with the baseline of parent element. This is a default value. |
| length | It is used to increase or decrease length of the element by the specified length. negative values are also allowed. |
% |
It is used to increase or decrease the element in a percent of the "line-height" property. negative values are allowed. |
sub |
It aligns the element as if it was subscript. |
| super | It aligns the element as if it was superscript. |
top |
It aligns the top of the element with the top of the tallest element on the line. |
| bottom | It aligns the bottom of the element with the lowest element on the line. |
| text-top | the top of the element is aligned with the top of the parent element's font. |
| middle | the element is placed in the middle of the parent element. |
| text-bottom | the bottom of the element is aligned with the bottom of the parent element's font. |
| initial | It sets this property to Its default value. |
| inherit | inherits this property from Its parent element. |
CSS Vertical Align Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
img.top {
vertical-align: text-top;
}
img.bottom {
vertical-align: text-bottom;
}
</style>
</head>
<body>
<p><img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Good Morning Friends"/> This is an image with a default alignment.</p>
<p><img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" class="top" alt="Good Morning Friends"/> This is an image with a text-top alignment.</p>
<p><img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" class="bottom" alt="Good Morning Friends"/> This is an image with a text-bottom alignment.</p>
</body>
</html>
Output:
This is an image with a default alignment.
This is an image with a text-top alignment.
This is an image with a text-bottom alignment.