Two span element does not align vertically

Question

I have two span element inside a div to align at 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, the span.yours is not at the middle.

And if I remove the style:

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

It will work.

What's the problem?

Answer 1

The problem lies in the fact that both children have an initial vertical-align value of baseline (as do all elements that participate in an inline-formatting context) - so when increasing the font-size, .yours remains aligned with the baseline of its inline sibling.

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

.position span {
     vertical-align: middle;
}

Answer 2

Use vertical align to control the position:

.position span  { vertical-align:middle;}

Here's the result: http://jsfiddle.net/WDfyr/3/