Bootstrap btn-link垂直对齐稍微露出

Question

当btn-link在一个文本块中显示带有类的Bootstrap按钮时,垂直对齐似乎超出了几个像素:

<div>Foo<button class="btn btn-link">Button</button>Bar</div>

小提琴

我怎样才能解决这个问题？从按钮中删除填充有点改善了问题,但我仍然看到几个像素的差异.

Answer 1

解决此问题的最佳方法是使用<span>元素包装文本节点,然后修改vertical-align属性:

更新的示例

div span {
    vertical-align: middle;
}

<div>
    <span>Foo</span>
    <button class="btn btn-link">Button</button>
    <span>Bar</span>
</div>