CODEWITHSUNDEEP
cssfont-awesome
RoyS
RoyS

Reputation: 1499

How to position font awesome icon vertically

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

Upvotes: 3

Views: 4186

Answers (1)

K K
K K

Reputation: 18109

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/

Upvotes: 4

Related Questions