How to position font awesome icon vertically

css, font-awesome

Solution

Try this 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;
}

Demo: http://jsfiddle.net/GCu2D/557/

Problem

I'm using the tont awesome volume icon on a webpage. I'm having difficulty positioning it vertically in its parent p element. This is the html code ``` <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> ``` and this the 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; } ``` at the moment the volume icon displays at the top of p.dlg_content. It needs to be aligned to the vertical middle. I've been varying the span.fa-volume-up-dlg properties but I've not been come up with something that works. Any help would be much appreciated

Original source