twitter-bootstrap - 如何将 Bootstrap 图标与按钮中的文本对齐？

Question

如何将 Bootstrap 图标和图像与底部对齐？ (我正在使用 font-awesome 图标)。
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一个较大的图标将推到其他图标之上并看起来偏离中心。