vertical-align doesn't work properly on not capitalized text

Question

I'm trying to vertical align, with pixel perfection in mind, two texts.

One is completely capitalized, the other is not.

http://codepen.io/FezVrasta/pen/EjxJoz

div {
  outline: 1px solid red;
  height: 31px;
  width: 400px;
  float: left;
  line-height: 31px;
}
span {
  display: inline-block;
  vertical-align: middle;
}

As you can see, the capitalized text is perfectly centered (20px above and 20px below).

The other one, has 26px above, and 19px below.

I think it always centers the text assuming the higher possible character as center... but I'd like to center the current text considering only the used characters.

Is there a way?

NB: Using CSS tables will not fix the problem.

Answer 1

Each browser only sets one baseline for the font. It doesn't care if you're using capitals or not. So naturally not every letter can be exactly centered because they have different heights and maybe descenders.

Vertical alignment is more a "close to"-value. When you set vertical-align: top; not all the letters will align to the top and bump the top-border, just the baseline of the font does.