垂直对齐字体真棒图标，文本在 <li> 内

Question

我有一个使用字体很棒的列表，因此它的 class 是 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;
}

我希望文本和停止方块垂直对齐。到目前为止，情况并非如此:

见截图：

我尝试将 fa-icon 和文本包装在 <div> 元素中，并将 vertical-align 属性设置为 middle，但没有成功。谢谢你帮助我。

Answer 1

使用行高

 li {
   font-size: 2em;
   margin: 1em 0;
   line-height: 40px;/*try changing this value*/
 }

Answer 2

使用 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>

Answer 3

li { 位置：绝对； top:0; left:0;} 对于旁边的文本，使用左填充。

垂直对齐字体真棒图标，文本在 <li> 内

Vertical align font awesome icon with text within <li>

html

css

vertical-alignment

twitter-bootstrap

font-awesome