Bootstrap btn-link vertical alignment slightly out

When displaying a Bootstrap 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>

enter image description here


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.


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;
  <button class="btn btn-link">Button</button>