Bootstrap БТН-ссылка вертикальное выравнивание немного из

Question

При отображении кнопки Bootstrap с классом btn-link в блоке текста, вертикальное выравнивание, кажется, из несколько пикселей:

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

Значение по умолчанию вертикального выравнивания (если вы не объявлять ничего), является базовой. Изображения будут совпадать с текстом в исходном тексте текста. Обратите внимание, что опускатели на букве опускаются ниже базовой линии. Изображения не совпадают с самой низкой точкой descenders, это не базовая линия.