Dwa elementy zakresu nie są wyrównane w pionie

Question

Mam dwa elementy span wewnątrz, aby wyrównać w środku div.

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

Styl:

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

Live Demo

Jak widać, span.yours nie jest w środku.

A jeśli usunąć styl:

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

Będzie ona działać.

Na czym polega problem?

Answer 1

Problem polega na tym, że zarówno dzieci mają wartość początkową vertical-align baseline (jak zrobić wszystko elementy, które biorą udział w inline-formatting context) - więc zwiększając rozmiar czcionki, .yours pozostaje wyrównany z baseline z wbudowanego elementu siostrzanego.

Prostym rozwiązaniem w tym przypadku jest, aby zastąpić wartość początkową z middle - fiddle

.position span { 
    vertical-align: middle; 
} 

Answer 2

Zastosowanie pionowy align kontrolować stanowisko:

.position span { vertical-align:middle;} 

Oto wynik: http://jsfiddle.net/WDfyr/3/