midCSS
What are the intricacies of vertical-align?
Updated Apr 28, 2026
Short answer
vertical-align only works on inline, inline-block, or table-cell elements, and aligns them relative to their line box.
Deep explanation
It does NOT align block elements inside their containers (that is the job of Flexbox/Grid). It aligns text strings or inline images next to each other. Values like middle, baseline, text-top, or specific pixel values dictate vertical placement relative to the dominant text baseline.
Real-world example
Aligning a small SVG icon perfectly flush with the text next to it inside a button.
Common mistakes
- Applying `vertical-align: middle` to a block-level `div` inside a larger container and being confused when absolutely nothing happens.
Follow-up questions
- What does vertical-align: baseline do?