2つのスパン要素が垂直に整列しない

Question

divの中央に整列するdiv内に2つのspan要素があります。

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

スタイル：あなたが見ることができるように

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

Live Demo

、span.yoursは中央ではありません。

そして、私はスタイルを削除する場合：

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

それは動作します。

問題が何ですか？

Answer 1

問題がすべてそうであるように、両方の子どもたちがbaselineの初期垂直アライン値を（持っているという事実にありますinline-formatting contextに参加している要素） - フォントサイズを大きくすると、.yoursはインライン兄弟のbaselineのままになります。 fiddle

.position span { 
    vertical-align: middle; 
} 

Answer 2

位置を制御する垂直整列使用：

.position span { vertical-align:middle;} 

ここでの結果です：http://jsfiddle.net/WDfyr/3/