Vertical align font awesome icon with text within <li>
10,292
Solution 1
Use inline-blocks
and do vertical-align: middle
to make it right.
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>
Solution 2
Use Line-Height
li {
font-size: 2em;
margin: 1em 0;
line-height: 40px;/*try changing this value*/
}
Author by
Cirnu
Updated on June 04, 2022Comments
-
Cirnu almost 2 years
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>
The associated CSS is :
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 withvertical-align
property set tomiddle
, without success. Thanks for helping me.