如何垂直放置字体真棒图标

Question

我在网页上使用了tont很棒的音量图标。 我很难将其垂直放置在其父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/