Вертикальное выравнивание текста и значка в кнопке начальной загрузки

Question

У меня возникают проблемы с вертикальным выравниванием шрифта - удивительный значок с текстом внутри кнопки под фреймворком бутстрапа. Я пробовал так много вещей, включая настройку высоты линии, но ничего не работает.

<button id="edit-listing-form-house_Continue" 
     class="btn btn-large btn-primary" 
     style="" 
     value="" 
     name="Continue" 
     type="submit"> 
    Continue 
    <i class="icon-ok" style="font-size:40px;"></i> 
</button> 

http://jsfiddle.net/fPXFY/

Как я могу получить эту работу ??

Answer 1

Существует одно правило, установленное font-awesome.css, которое необходимо переопределить.

Вы должны установить переопределение в файлах CSS, а не инлайн, но, по существу, значок-ок класс быть установлен в vertical-align: baseline; по умолчанию и которые я исправил здесь:

<button id="whatever" class="btn btn-large btn-primary" name="Continue" type="submit"> 
    <span>Continue</span> 
    <i class="icon-ok" style="font-size:30px; vertical-align: middle;"></i> 
</button> 

Пример здесь: http://jsfiddle.net/fPXFY/4/ и выход которого является:

Я сокращенных размером шрифта вышеуказанной иконки в данном случае к 30px, как он чувствует себя слишком большим на 40px для размера кнопки, но это чисто личная точка зрения. Вы можете увеличить отступы на кнопку, чтобы компенсировать в случае необходимости:

<button id="whaever" class="btn btn-large btn-primary" style="padding: 20px;" name="Continue" type="submit"> 
    <span>Continue</span> 
    <i class="icon-ok" style="font-size:30px; vertical-align: middle;"></i> 
</button> 

Производство: http://jsfiddle.net/fPXFY/5/ выход которого является: