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

Posted 2023-03-05

【中文标题】垂直对齐字体真棒图标与 <li> 中的文本

【英文标题】：Vertical align font awesome icon with text within <li>

【发布时间】：2017-01-01 21:24:47

【问题描述】：

我有一个使用字体 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，但没有成功。谢谢你帮助我。

【问题讨论】：

和 应该是带有垂直对齐的内联块：middle

【参考方案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>

【讨论】：

谢谢，它可以解决问题，即使对齐不是很完美，重新使用它也会容易得多

【参考方案2】：

使用线高

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

【讨论】：

谢谢，所以对齐很大程度上取决于我使用的文本大小。有没有办法在不测试 line-height 值的情况下实现这一点？