将< li>中的文本垂直对齐字体真棒图标 [英] Vertical align font awesome icon with text within <li>
本文介绍了将< li>中的文本垂直对齐字体真棒图标的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个使用字体很棒的列表,因此它的类是fa-ul
:
I have a list that uses font awesome, hence its class is fa-ul
:
<ul class='fa-ul'>
<li class='dept'><i class='fa-li fa fa-stop'></i><span>Management</span></li>
<li class='dept'><i class='fa-li fa fa-stop'></i><span>Something else</span></li>
</ul>
关联的CSS是:
li {
font-size : 2em;
margin: 1em 0;
}
我希望文字和方形框在垂直方向上对齐.到目前为止,情况并非如此:
I'd like the text and the stop-square to be vertically aligned. So far, it is not the case :
查看屏幕截图:
我尝试将fa-icon和文本包装在<div>
元素中,并且vertical-align
属性设置为middle
,但没有成功.感谢您的帮助.
I've tried to wrap the fa-icon and the text in a <div>
element with vertical-align
property set to middle
, without success. Thanks for helping me.
推荐答案
使用inline-blocks
并执行vertical-align: middle
使其正确.
li {
font-size : 2em;
margin: 1em 0;
}
li > *{
display: inline-block;
vertical-align: middle;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<ul class='fa-ul'>
<li class='dept'><i class='fa-li fa fa-stop'></i><span>Management</span></li>
<li class='dept'><i class='fa-li fa fa-stop'></i><span>Something else</span></li>
</ul>
这篇关于将< li>中的文本垂直对齐字体真棒图标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文