↕️ CSS vertical-align — Control Vertical Positioning of Inline Elements
The vertical-align property controls how inline or table-cell elements align vertically relative to their surrounding content or container. It’s essential for aligning text, images, and inline-block elements in a line.
🔹 What Does vertical-align Do?
It adjusts the vertical position of an element within the line box (for inline-level or table-cell elements), letting you fine-tune how elements sit relative to the baseline or other vertical anchors.
📘 Syntax
selector {
vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <length> | <percentage>;
}
✅ Common Values Explained
| Value | Description |
|---|---|
baseline | Aligns to the baseline of the parent (default) |
sub | Aligns as subscript |
super | Aligns as superscript |
text-top | Aligns to the top of the parent’s text |
text-bottom | Aligns to the bottom of the parent’s text |
middle | Aligns to the middle of the parent’s x-height |
top | Aligns to the top of the tallest element in the line |
bottom | Aligns to the bottom of the lowest element in the line |
<length> | Moves the element up or down by a specific length (e.g., 10px, -5px) |
<percentage> | Moves relative to the line height |
✍️ Examples
1. Align an image with text baseline
<p>Here is an image <img src="icon.png" alt="icon" style="vertical-align: middle;"> aligned in the middle.</p>
✅ The image sits vertically centered relative to the text.
2. Superscript and Subscript
<p>H<sub>2</sub>O and x<sup>2</sup> are examples.</p>
✅ The chemical formula and exponent look correct with default sub/super vertical alignment.
3. Using Length Values
<span style="vertical-align: 10px;">Shifted up</span>
<span style="vertical-align: -5px;">Shifted down</span>
✅ Fine-tune position by moving elements up or down.
🖼️ Image Idea: Vertical Align Visual Guide
Show a line with several inline elements aligned with different vertical-align values: baseline, middle, top, bottom, sub, super — highlighting how each sits relative to the text line.
💡 Tips
vertical-alignonly works with inline-level or table-cell elements.- For block elements, use other layout techniques (like Flexbox or Grid).
- Useful for aligning icons, images, or inline elements within text.
- Combine with
line-heightto refine vertical positioning.
✅ Summary
| Property | vertical-align |
|---|---|
| Purpose | Adjust vertical alignment of inline or table-cell elements |
| Default value | baseline |
| Applies to | Inline elements, inline-blocks, table cells |
| Useful for | Aligning text, images, icons vertically |
🔚 Final Thought
vertical-align is your go-to property for precise vertical alignment within lines, making text and inline content look balanced and polished.