Bootstrap btn-link vertical alignment slightly out

Question

When placing a Bootstrap 3 button with class btn-link in a block of text, the vertical alignment seems to be out by a few pixels:

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

Fiddle

How can I fix this? Removing the padding from the button improves the issue somewhat, but I'm still seeing a discrepancy of a few pixels.

Answer 1

The best way to fix this would be to wrap the text nodes with <span> elements and then modify the 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

If you don't want to (or can't) wrap all non-button items within <span>'s, a simpler approach may be to change the btn-link's vertical-alignment from middle to baseline.

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

Quoting from 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.