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

发布时间：2020-12-18 00:28:45 所属栏目：安全来源：网络整理

导读：如何将引导图标和图像对齐到底部？ (我使用font-awsome作为图标). JSBIN：http://jsbin.com/uwupuz/2/edit div class="btn-group" a class="btn" href="#" i class="icon-plus"/i spanAdd/span /a a class="btn" href="#" i class="icon-trash"/i spanRemove

如何将引导图标和图像对齐到底部？ (我使用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>

解决方法

试试这个： http://jsfiddle.net/jonschlinkert/CBss2/1/这是应用行高后的样子：1;

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!