如何垂直定位字体awesome图标

Question

我正在网页中使用tony awesome音量图标。但是我在将它垂直放置在其父元素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属性，但没有找到有效的解决方案。任何帮助将不胜感激。

- RoyS

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/

- K K

---

抱歉回复晚了。CSS不起作用，我不知道为什么。JSFiddle显然可以工作。在CSS中，span.dlg_text和span.fa-volume-up-dlg只在此处引用，因此它不应该是一个特异性问题（就我所知）。我对此感到困惑。 - RoyS

如果可能的话，请分享您已经实现此功能的链接。同时请查看控制台是否有错误信息。 - K K

我无法在Firebug控制台中检测到任何错误。请按照要求访问以下链接：http://www.english2theworld.com/index.php/courses/dialogs/buying-flowers - RoyS

从 span.fa-volume-up 中移除 "position:absolute"。 - K K

我将“position: absolute”移动到了span.fa_volume_ws。这修复了购买花卉页面中的对齐以及单词设置对话框中的音量图标。非常感谢您的帮助，它真正指明了前进的方向。此致最好的问候。 - RoyS