Как разместить шрифт удивительный значок по вертикали

Question

Я использую значок тонкой тома на веб-странице. У меня возникают трудности с позиционированием его по вертикали в его родительском элементе p. Это HTML-код

<p class="dlg_content eng_dlg"><span class="dlg_text" id="bf01">Shopkeeper:  Good afternoon, how can I help you?</span>&#xa0;<span class ="fa fa-volume-up fa-volume-up-dlg"></span> </p> 

и этого CSS

span.dlg_text { 
    margin-left: 2%; 
    font-size: 0.9em; 
} 
span.fa-volume-up-dlg { 
    display:inline-block; 
    font-size: 1.2em; 
    height: 2em; 
    vertical-align: middle; 
} 

на данный момент значок громкости отображается в верхней части p.dlg_content. Он должен быть выровнен по вертикали. Я меняю свойства span.fa-volume-up-dlg, но я не придумал что-то, что работает. Любая помощь будет высоко ценится

Answer 1

Попробуйте CSS:

span.dlg_text { 
    margin-left: 2%; 
    font-size: 0.9em; 
    display:inline-block; 
    vertical-align: middle; 
} 
span.fa-volume-up-dlg { 
    display:inline-block; 
    font-size: 1.2em; 
    vertical-align: middle; 
} 

Демо: http://jsfiddle.net/GCu2D/557/