Cirnu Cirnu - 3 months ago 35
HTML Question

Vertical align font awesome icon with text within <li>

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:

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. Thanks for helping me.

Answer

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>