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/

如何垂直定位字体真棒图标

1 个答案: