如何垂直放置字体真棒图标
How to position font awesome icon vertically
我在网页上使用了很棒的音量图标。我很难将它垂直定位在其父 p 元素中。这是html代码
<p class="dlg_content eng_dlg"><span class="dlg_text" id="bf01">Shopkeeper: Good afternoon, how can I help you?</span> <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 属性,但我还没有想出有效的方法。任何帮助将不胜感激
试试这个 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;
}
我在网页上使用了很棒的音量图标。我很难将它垂直定位在其父 p 元素中。这是html代码
<p class="dlg_content eng_dlg"><span class="dlg_text" id="bf01">Shopkeeper: Good afternoon, how can I help you?</span> <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 属性,但我还没有想出有效的方法。任何帮助将不胜感激
试试这个 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;
}