CSS Vertical Align
BLUF: Styling is what brings the web to life, and mastering CSS Vertical Align is key to creating beautiful, responsive interfaces. This tutorial breaks down the concepts and syntax you need to succeed with CSS.
Visual Design Hack: CSS Vertical Align
CSS is all about presentation. Discover how CSS Vertical Align works to transform plain HTML into a premium user experience in the guide below.
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.
