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

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较大的图标将推到其他图标之上并看起来偏离中心。

Answer 2

您可以使用相对位置。

i {
    position: relative;
    bottom: 1px; // or however much you want to offset it by
}

http://jsfiddle.net/hajpoj/ZdPGe/