Bootstrap btn-link 垂直对齐略出

Question

在文本块中放置带有 class btn-link 的 Bootstrap 3 按钮时，垂直对齐似乎偏离了几个像素：

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

The default value of vertical-align (if you declare nothing), is baseline. Images will line up with the text at the baseline of the text. Note that descenders on letters dip below the baseline. Images don't line up with the lowest point of the descenders, that isn't the baseline.

Bootstrap btn-link 垂直对齐略出

Bootstrap btn-link vertical alignment slightly out

css

twitter-bootstrap

twitter-bootstrap-3