Two span elements do not align vertically

Question

I have two span elements inside a div to align in the middle of the div .

 <div class="position"> <span class="yours">Your current position：</span> <span class="name">New York</span> </div> 

Style:

 .position{ height:70px; background-color:gray; } .position span{ line-height:70px; } .position .name{ font-size:28px; } 

Live demo

As you can see, span.yours not in the middle.

And if I remove the style:

 .position .name{ font-size:28px; } 

He will work.

What is the problem?

Answer 1

The problem is that both children have an initial baseline vertical alignment value (like all elements involved in the inline formatting context ) - therefore, increasing the font size, .yours remains aligned with the baseline of its inline brother.

A simple solution in this case is to override the initial value with middle - fiddle

 .position span { vertical-align: middle; } 

Answer 2

Use vertical alignment to control position:

 .position span { vertical-align:middle;} 

Here is the result: http://jsfiddle.net/WDfyr/3/