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

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

<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/

Как я могу заставить это работать?

Ответы

Ответ 1

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

Вы должны установить переопределения в своих CSS файлах, а не в строке, но по существу, класс icon-ok устанавливается по умолчанию по умолчанию 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/, выход которого:

enter image description here

Я уменьшил размер шрифта значка выше в этом случае до 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/, выход которого:

enter image description here

Ответ 2

В качестве альтернативы, если вы используете загрузчик, вы можете просто добавить align-middle для вертикального выравнивания элемента.

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

Ответ 3

Просто оберните метку кнопки в дополнительный промежуток и добавьте class="align-middle" к обоим (значок и метка). Это отцентрирует ваш значок по вертикали текста.

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