垂直對齊字體真棒圖標與文本內<li>

Question

我有一個使用的字體真棒，因此它的類是一個列表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-圖標，並在文本<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> 

Answer 2

使用線高

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