如何在列表项中垂直居中FontAwesome图标？

Question

我正在制作一个带有一些文字和fontawesome图标的列表。我可以垂直居中文本，但不能放置图标。在这里你可以看到我的意思：

这是我的代码：

.fa-info {
  color: #90A4AE;
  position: fixed; 
/*position is fixed so I can align it to the edge of the page*/
  width: 55px;
  left:0;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  z-index: 11;
  height: 60px;
}

#sidebar ul {
  width: 200px;
  float: right;
  left: 70px;
  top: 23vh;
  position: absolute;
  text-align: left;
    padding:0; 
    margin:0;
}

#sidebar li {
  white-space: nowrap;
  color: #90A4AE;
  list-style-type: none;
  font-size: 30px;
  font-family: 'NeutraFaceMedium';
  text-align: left;
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
    height: 60px;
    line-height: 60px;
}

<ul>
    <li><i class="fa fa-info fa-small"></i>About Us</li>
</ul>

我希望能够将fontawesome图标垂直居中，使其与文本处于同一水平。

由于

Answer 1

更改垂直对齐： <i class="fa fa-info fa-small" style="vertical-align: middle">

Answer 2

请试试这个：

 ul
    {
        list-style-type: none;
    }
    #sidebar ul {
      width: 200px;
      float: right;
      left: 70px;
      top: 23vh;
      position: absolute;
      text-align: left;
        padding:0; 
        margin:0;
    }

    #sidebar li {
      white-space: nowrap;
      color: #90A4AE;
      list-style-type: none;
      font-size: 30px;
      font-family: 'NeutraFaceMedium';
      text-align: left;
      -o-transition:.5s;
      -ms-transition:.5s;
      -moz-transition:.5s;
      -webkit-transition:.5s;
      transition:.5s;
        height: 60px;
        line-height: 60px;
    }

    .fa-info {
      color: #90A4AE;
        padding: 9px;
        font-size: 20px;
      -webkit-transition: all 0.3s ease-out;
      -moz-transition: all 0.3s ease-out;
      -o-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
      z-index: 11;

    }

JSFiddle：http://jsfiddle.net/JfGVE/1224/

Answer 3

在您的班级.fa-info中，位置和宽度是造成问题的原因。删除或评论它们并且效果很好。

.fa-info {
  color: #90A4AE;
  left:0;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  z-index: 11;
  height: 60px;
}