Understanding CSS `vertical-align`: Controlling Vertical Positioning of Inline and Table-Cell Elements
Master vertical alignment in CSS using the `vertical-align` property. This tutorial explains the various `vertical-align` values, their effects on inline and table-cell elements, and provides practical examples to help you create precisely aligned and visually appealing web layouts.
Understanding CSS `vertical-align`
The CSS `vertical-align` property controls the vertical positioning of an inline or table-cell element within its line or cell. While seemingly simple, it can be tricky for beginners.
How `vertical-align` Works
- Applies to inline or inline-block elements.
- Affects the element's position, not its content (except for table cells). In table cells, it affects the content's position within the cell.
`vertical-align` Values
Here's a breakdown of the `vertical-align` values. Note that the exact visual result can depend on factors such as line height and the content of the elements.
| Value | Description |
|---|---|
baseline |
(Default) Aligns the element's baseline with the parent's baseline. |
length (e.g., 10px) |
Offsets the element vertically by the specified length (positive or negative). |
% (e.g., 50%) |
Offsets the element by a percentage of the parent's line-height. |
sub |
Aligns like a subscript. |
super |
Aligns like a superscript. |
top |
Aligns the top of the element with the top of the tallest element on the line. |
bottom |
Aligns the bottom of the element with the bottom of the tallest element on the line. |
text-top |
Aligns the top of the element with the top of the parent's font. |
middle |
Centers the element vertically within its line. |
text-bottom |
Aligns the bottom of the element with the bottom of the parent's font. |
initial |
Resets to the default value (baseline). |
inherit |
Inherits the value from its parent element. |
Example
This example shows different vertical alignments of an image. (The "Test it Now" and "Output" sections are placeholders and would be replaced with an actual demonstration of the vertical alignment differences.)