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

【问题标题】：How to centre FontAwesome icons vertically in a list item?如何在列表项中垂直居中 FontAwesome 图标？
【发布时间】：2016-07-13 21:31:01
【问题描述】：

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

这是我的代码：

.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 图标垂直居中，使其与文本处于同一水平。

谢谢

【问题讨论】：

给它rel pos，然后给它顶部：(box height/2) - (icon height/2)...
@dandavis 我真的不知道图标的高度。我将字体大小设置为 0.8em。
那么一半的高度是0.4em...
您需要在容器（如 UL）上使用position:fixed，而不是在图标本身上。修复容器后，您可以围绕图标“平移”给它position:relative 和顶部/左侧/底部/等值。

标签： javascript html css font-awesome

【解决方案1】：

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

【讨论】：

这不起作用抱歉。图标仍然与顶部对齐，而不是中间对齐。不过感谢您的回答。
对不起，我总是把中间和中间搞混。谢谢@Garconis

【解决方案2】：

在你的班级.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;
}

【讨论】：

我需要固定位置，以便我可以将 fontawesome 图标对齐到页面的左侧。你知道我是否可以在不固定位置的情况下将它对齐到页面的左侧？不过感谢您的回答。

【解决方案3】：

请试试这个：

 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/

【讨论】：

我需要固定位置，以便我可以将 fontawesome 图标对齐到页面的左侧。你知道我是否可以在不固定位置的情况下将它对齐到页面的左侧？不过感谢您的回答。