Vertical-Align: All You Need To Know (CSS)
Yep, let’s talk about the CSS property vertical-align. It’s intended use is to align text and elements next to each other. Like centering an icon next to a bit of text.
But, it can be a real scumbag sometimes with all its seemingly mysterious rules at work. For example, it might happen, that the element you changed vertical-align for doesn’t change its alignment at all, but other elements next to it do! What a joy!
So, to minimize future pain, I waded through W3C’s CSS specifications to clarify the behavior of vertical-align once and for all.
Inline-block elements are what their name suggests: block elements living inline. They can have a width and height (possibly defined by its own content) as well as padding, a border and margin.
Inline-level elements are laid out next to each other in lines. Once there are more elements than fit into the current line, a new line is created beneath it. All these lines have a so-called line box, which encloses all the content of its line. Differently sized content means line boxes of different height. In the following illustration the top and bottom of line boxes are indicated by red lines.
The line boxes trace out the field we are playing on. Inside these line boxes the property vertical-align is responsible for aligning the individual elements. So, in respect to what are elements aligned?
