[英]Vertical align font awesome icon with text within <li>
I have a list that uses font awesome, hence its class is fa-ul
: 我有一个使用的字体真棒,因此它的类是一个列表
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>
The associated CSS is : 相关的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 :
到目前为止,情况并非如此:
See screenshot: 看截图:
I've tried to wrap the fa-icon and the text in a <div>
element with vertical-align
property set to middle
, without success. 我试图包裹FA-图标,并在文本
<div>
与元素vertical-align
属性设置为middle
,但没有成功。 Thanks for helping me. 谢谢你的帮助。
Use inline-blocks
and do vertical-align: middle
to make it right. 使用
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>
Use Line-Height 使用线高
li {
font-size: 2em;
margin: 1em 0;
line-height: 40px;/*try changing this value*/
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.