css: Texte d'alignement vertical au milieu

Question

Je suis en train d'aligner un texte verticalement au milieu (jsfiddle)

J'ai portées uniquement avec du texte et des portées qui ont une hauteur définie (éléments inline-block)

Le code HTML ressemble à ceci:

<div class="parent"> 
    <span class="text">Bar</span> 
    <span class="bar"></span> 
    <span class="text">Foo</span> 
</div> 

Le css:

.bar { 
    display: inline-block; 
    height:100px; 
    width: 100px; 
    background-color: green; 
} 

J'ai besoin que le texte s'aligne verticalement au milieu de son parent. J'ai essayé de mettre vertical-align: middle sur .text mais pour une raison quelconque, seules les valeurs top et bottom semblent fonctionner. Aucune suggestion ?

Answer 1

Essayez avec ceci:

.parent { 
    vertical-align: middle; 
} 
.bar { 
    display: inline-block; 
    height:100px; 
    width: 100px; 
    background-color: green; 
    vertical-align: middle; 
} 
.text { 
} 

Demo

Answer 2

Essayez:

.bar { 
    vertical-align: middle; 
} 

Fiddle here