Сейчас я использую Twitter Bootstrap 3 RC2, а также Twitter Bootstrap, который перемещен в отдельный репозиторий. Я заметил, что при использовании кнопки с текстом значок не очень хорошо центрируется:
Значок и текст имеют одинаковую нижнюю строку, но я считаю, что для красивой кнопки значок должен быть центрирован на основе текста, не так ли? Есть идеи, как этого добиться?
Переместите текст из <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>
input-group. Эта проблема была устранена с помощью этого решения, хотя значок сначала отображался слишком низко на кнопке. Использование vertical-align:top исправило это.
- person Bjørn Stenfeldt; 11.11.2013
f, t) или нисходящие (g, y, q), так как середина вертикального блока слова не будет точно выровнена с середина вертикальной рамки значка.
- person kumarharsh; 19.01.2015
vertical-align можно использовать для таких глифов! Спасибо!
- person Priidu Neemre; 16.09.2015
Примените стиль vertical-align: -{N}px; к .glyphicon-му, чтобы сдвинуть его на N пикселей вверх/вниз.
Для некоторых вертикальное выравнивание может не работать из-за позиционирования: если вы посмотрите на класс .glyphicon, вы увидите, что он установлен как относительный, попробуйте установить для него значение «наследовать», например:
.glyphicon.v-centered {
position: inherit;
vertical-align: middle;
}
Это также должно работать для значков не на кнопках, например. вкладки.
Попробуйте vertical-align: middle; на .glyphicon-th:before
Ни один из вышеперечисленных методов не работал у меня хорошо сам по себе, но использование 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 для живого примера.
Мне удалось сделать это так:
.glyphicon.center:before {
vertical-align: middle;
}
и используйте <span class="glyphicon center glyphicon-th"></span>.
Проблема: значок глифа был на 2 пикселя выше текста кнопки. Исправил это следующим образом, используя примеры здесь. Спасибо (Аластер Мо).
Мне удалось заставить мою работать следующим образом:
HTML
<div class="col-xs-12">
<a title="" class="btn btn-block btn-info oa-btn-spacer_homepage oa-ellipsis" role="button" href="default.aspx?action=page&name=creditcard">
<span class="glyphicon glyphicon-credit-card glyph_Credit"></span> Update Your Credit Card and Billing Information
</a>
</div>
CSS
#panelTopic .glyph_Credit {
vertical-align: middle;
display: inline-block;
padding-bottom:6px;
}
<button class="btn btn-default">
<span class="glyphicon glyphicon-th" style="font-size: 14px;"> </span>
<span style="font-size: 17px;">Not Centered</span>
</button>
пожалуйста, увеличьте или уменьшите размер шрифта в соответствии с вашими требованиями
2nd — это всего лишь пример.
- person losnir; 20.08.2013
Другой путь
<button class="btn default" id="IdBack">
<i class="glyphicon glyphicon-hand-left"></i>
<b>Back</b>
</button>
Добавьте поле определенных пикселей или процентов. В моем приложении это прекрасно работало, исходя из размеров области.
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>
