İki span öğesi dikey olarak hizalamıyor

Question

div öğesinin ortasında div'un ortasında hizalamak için iki span öğem var.

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

Stil:

Live Demo

Gördüğünüz gibi

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

, span.yours ortada değil.

Ve stilini kaldırırsanız:

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

O çalışacaktır.

Sorun nedir?

Answer 1

tüm yaptığı gibi sorunu (her iki çocuk baseline bir başlangıç ​​vertical-align değerine sahip olması yatıyor inline-formatting context'a katılan öğeler) - yazı tipi boyutunu artırırken .yours satır içi kardeşi baseline ile aynı hizada kalır. fiddle

.position span { 
    vertical-align: middle; 
} 

Answer 2

Kullanım konumunu kontrol etmek dikey hizalama: Burada

.position span { vertical-align:middle;} 

sonucudur: http://jsfiddle.net/WDfyr/3/