Yeah! Why the hell does the CSS property
vertical-align never work?
The Answer has three parts:
vertical-align aligns elements relative to the dimensions of the line the element appears in.
Nope, not relative to the container element. See?
Fire up the dev tools to poke around in the markup of the example!
But here’s also a simplified version of it:
On to rule number 2 of
2) The line changes its height to house all the elements it contains. The minimum height of a line is the
line-height. This is also its default height.
Alright, then let’s add a tall inline-block to the mix and see what happens:
And that already fucks up our layout. Sigh… Well, at least top and bottom still behave as expected. But middle is definitely not in the middle.
But, you can see, the line got taller.
Fixing the layout brings us to consideration three.
3) The baseline of a line is placed where ever it needs to be to fulfill the alignment.
Without an explicit alignment the bar is placed on top of the baseline (the blue line). Since it is so tall it pushes
the baseline down and takes the middle text with it. But why does the baseline even play a role when aligning with the middle?
vertical-align: middle places elements relative to the baseline according to the formula
baseline + x-height/2.
middle means alignment with the middle of the line’s text. And this text sits on the baseline.
To move the baseline up again, we need to align the bar itself with
Inspired by the explanation and examples above you should now be able to figure out why
vertical-align does not work
in your particular situation.
For an even deeper look at
vertical-align you might want to read Vertical-Align: All You Need To Know.