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

Question

在文本块中显示类btn-link的Bootstrap按钮时，垂直对齐似乎有几个像素：

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

Fiddle

我该如何解决这个问题？从按钮中删除填充可以稍微改善这个问题，但我仍然看到几个像素的差异。

Answer 1

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

Updated Example

div span {
    vertical-align: middle;
}

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

Answer 2

如果您不想（或不能）将所有非按钮项包装在<span>中，更简单的方法可能是更改btn-link的垂直对齐方式middle至baseline.

.btn-link { vertical-align: baseline; }

引自CSS-Tricks.com: "What is Vertical Align?"

  

vertical-align的默认值（如果你什么都不声明）是基线。图像将与文本基线处的文本对齐。请注意，字母上的下降点低于基线。图像不符合下降点的最低点，即不是基线。