Vertical-align does not work properly if there is no title

Question

I am trying to perform vertical alignment with pixel perfection, two text.

One is completely capital, 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 heading is fully centered (20px above and 20px below).

Another one has 26px higher and 19px lower.

I think it always centers the text, suggesting the higher possible character as the center ... but I would like to focus the current text, considering only the characters used.

Is there any way?

NB: Using CSS tables will not fix the problem.

Answer 1

Each browser sets only one baseline for the font. It doesn't matter if you use capital or not. Therefore, of course, not every letter can be precisely centered, because they have different heights and, possibly, descenders.

Vertical alignment is more "close to" the value. When you set vertical-align: top; not all letters are aligned on the top and hit the upper border, but only the baseline of the font.

Answer 2

Here is the code:

 <div><span>ACEOU</span></div> <div><span>aceou</span></div> div { outline: 1px solid red; height: 31px; vertical-align: middle; width: 400px; float: left; line-height: 31px; display: table-cell; } 

Hope this helps :)

Answer 3

I think it will be a trick: Give line-height so as not to span the div.

HTML:

 <div><span>ACEOU</span></div> <div><span>aceou</span></div> 

CSS

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

Link: http://codepen.io/anon/pen/oXNOPb

Answer 4

One thing you could try is to set different line-height for each span . This is an incredibly complex solution, and there is no guarantee that it will give you the exact result (in pixels) in different browsers and / or operating systems.

Example

 div{ border:1px solid red; box-sizing:border-box; float:left; height:33px; width:25%; } span{ display:inline-block; text-indent:5px; vertical-align:middle; } div:first-of-type span{ line-height: 31px; } div:last-of-type span{ line-height: 28px; } 

 <div><span>ACEOU</span></div> <div><span>aceou</span></div>