html - 为什么我的文字和图标坏了？

Question

为什么我的图标和文本不在同一行，尽管我已经使用 display-line

将它们放在 li 中

<div class="user">
  <ul>
   <li>         
     <i class="fa fa-2x fa-border fa-user"></i>              
     some text             
    </li>
 </ul>
</div>

我需要给我的图标留出 5px 的边距，所以将它设置为 position: absolute 因为它现在没有将它放置在 inline 中。

为什么我的图标和文字不在同一行，图标顶部有 5px 的边距。

下面是 fiddle 。

http://codepen.io/anon/pen/CjBhm

Answer 1

不要使用定位，您的情况不需要它。我认为您过去习惯于将图标对齐到正确的位置，但您可以使用 position: absolute; 对齐而不

现在，如果您删除定位，文本将垂直对齐到底部，原因是 <i>是一个内联元素，默认情况下与 baseline 对齐，因此您需要使用 vertical-align: middle;

Demo

.fa-user {
    vertical-align: middle;
}