Центр Twitter Bootstrap 3 Глификон в пуговицах

Теперь я использую Twitter Bootstrap 3 RC2, а также Twitter Bootstrap, который переместился в отдельный репозиторий. Я заметил, что при использовании в кнопке с текстом значок не очень хорошо центрирован:

Значок и текст имеют одинаковую нижнюю строку, но я считаю, что для красивой кнопки значок должен быть центрирован на основе текста, не так ли? Любая идея, как достичь этого?

http://bootply.com/74652

Ответ 1

Переместите текст из <span> с помощью глификона и примените vertical-align: middle; к <span>

  <button class="btn btn-default">
    <span class="glyphicon glyphicon-th" style="vertical-align: middle;"></span> Centered
  </button>

Демо

Это работает в Bootstrap 4 с символами Font Awesome, такими как

<button class="btn btn-default" style="vertical-align: middle;">
    <i class="fa fa-times"></i> Centered
</button>

Ответ 2

Примените стиль vertical-align: -{N}px; к .glyphicon-th, чтобы сдвинуть его на N пикселей вверх/вниз.

Ответ 3

Для некоторого вертикального выравнивания может не работать из-за позиционирования. Если вы посмотрите на класс .glyphicon, вы увидите, что он настроен на относительный, попробуйте установить его на наследование, например:

.glyphicon.v-centered {
    position: inherit;
    vertical-align: middle;
}

Это также должно работать для значков, не входящих в кнопки, например. Вкладки.

Ответ 4

Попробуйте vertical-align: middle; on .glyphicon-th:before

Ответ 5

Ни один из вышеперечисленных методов не работал сам по себе, но используя display: inline-block; vertical-align: middle на элементах. Это inline-block, который кажется ключевым.

.vcenter * {
    vertical-align: middle;
    display: inline-block;
}

.btn i {
    margin-left: 10px;
    font-size: 20px;
}

<div class="vcenter">
  <button class="btn btn-default btn-lg"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button>
  <button class="btn btn-default"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button>
  <button class="btn btn-default btn-sm"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button>
</div>

Смотрите http://www.bootply.com/UbY78zM8pD для живого примера.

Ответ 6

Мне удалось сделать это вот так:

.glyphicon.center:before {
    vertical-align: middle;
}

и используйте <span class="glyphicon center glyphicon-th"></span>.

Ответ 7

<button class="btn btn-default">
          <span class="glyphicon glyphicon-th" style="font-size: 14px;"> </span>
          <span style="font-size: 17px;">Not Centered</span>
    </button>

пожалуйста, увеличьте или уменьшите размер шрифта в соответствии с вашим требованием

Ответ 8

Другой способ

<button class="btn default" id="IdBack">
  <i class="glyphicon glyphicon-hand-left"></i> 
  <b>Back</b>
</button>

Ответ 9

Добавьте запас определенных пикселей или процентов. В моем приложении это прекрасно работало, основываясь на размерах области.

CSS

.someWrapperClass button span {
    margin-top: 120%;
}

HTML:

<div class="someWrapperClass">
    <button type="button" ng-click="SomeMethod()">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </button>
</div>