css - 如何垂直放置 Font Awesome 图标

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/