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

Question

我有一个使用字体awesome的列表,因此它的类是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

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