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

时间:2013-01-16 19:07:01

标签: twitter-bootstrap

如何将bootstrap图标和图像对齐到底部? (我使用font-awesome作为图标)。

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

enter image description here

<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>

2 个答案:

答案 0 :(得分:3)

试一试:http://jsfiddle.net/jonschlinkert/CBss2/1/这是应用line-height: 1;

后的样子

button screen cap

我不会像@hajpoj所建议的那样弄乱position属性,有更简洁的方法可以解决以后不会产生级联效应的问题。使用position: relative的另一个问题是每个图标的大小实际上有点不同。您希望通过考虑这一点来尝试保持维护。最好使它出现,好像它对于大多数正常大小的图标是底部对齐的,并且当使用大于平均值的图标时,它与文本正确对齐。使用position: relative一个较大的图标会超过其他图标并偏离中心。

答案 1 :(得分:0)

您可以使用位置相对。

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

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