如何将引导图标与按钮中的文本对齐？

Question

如何将引导图标和图像对齐到底部？(我使用font-awsome作为图标).

JSBIN:http://jsbin.com/uwupuz/2/edit

<div class="btn-group"> 
    <a class="btn" href="#">
      <i class="icon-plus"></i>
      <span>Add</span>
    </a>
    <a class="btn" href="#">
        <i class="icon-trash"></i>
        <span>Remove</span>
    </a>
    <a class="btn" href="#">
      <i class="icon-edit"></i>
      <span>Edit</span>
    </a>
  </div>

Answer 1

试试这个： http: //jsfiddle.net/jonschlinkert/CBss2/1/ 这是申请后的样子line-height: 1;

我不会position按照 @hajpoj 的建议弄乱该属性，有更干净的方法来解决问题，并且以后不会产生级联效应。使用的另一个问题position: relative是每个图标的大小实际上有点不同。您想通过考虑到这一点来尝试减少维护。对于大多数正常大小的图标来说，最好使其看起来像是底部对齐，并且当使用大于平均大小的图标时，它会与文本正确居中。使用position: relative较大的图标会将其推到其他图标之上，并且看起来会偏离中心。