CSS 按钮中的中心 Twitter Bootstrap 3 Glyphicons
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18273500/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center Twitter Bootstrap 3 Glyphicons in buttons
提问by Mahoni
I am now using Twitter Bootstrap 3 RC2 as well as Twitter Bootstrap which has moved into a separate repository. I have noticed, if used in a button with text the icon is not centered very well:
我现在正在使用 Twitter Bootstrap 3 RC2 以及 Twitter Bootstrap，后者已移入单独的存储库。我注意到，如果在带有文本的按钮中使用，图标不会很好地居中：
The icon and the text have the same bottom line, but I believe for a good looking button the icon should be centered based on the text, shouldn't it? Any idea how to achieve this?
图标和文本具有相同的底线，但我相信对于一个好看的按钮，图标应该基于文本居中，不是吗？知道如何实现这一目标吗？
回答by Russ Cam
Move the text out of the <span>with the glyphicon and apply vertical-align: middle;to the <span>
移动文本出来的<span>与glyphicon并应用vertical-align: middle;到<span>
<button class="btn btn-default">
<span class="glyphicon glyphicon-th" style="vertical-align: middle;"></span> Centered
</button>
This works in Bootstrap 4 with Font Awesome icons like so
这可以在 Bootstrap 4 中使用 Font Awesome 图标
<button class="btn btn-default" style="vertical-align: middle;">
<i class="fa fa-times"></i> Centered
</button>
回答by kumarharsh
Apply a vertical-align: -{N}px;style on the .glyphicon-th to shift it N pixels up/down.
vertical-align: -{N}px;在 .glyphicon-th 上应用样式以将其向上/向下移动 N 个像素。
回答by Vilius
For some vertical-align might not work due to positioning: If you look into .glyphicon class you'll see it is set to relative, try setting it to 'inherit' e.g:
对于某些由于定位而导致的垂直对齐可能不起作用：如果您查看 .glyphicon 类，您会看到它设置为相对，请尝试将其设置为“继承”，例如：
.glyphicon.v-centered {
position: inherit;
vertical-align: middle;
}
This should also work for icons not in buttons, e.g. tabs.
这也适用于不在按钮中的图标，例如标签。
回答by Valkerie Silk
Problem: Glyph icon was 2 px too high above the button text. Fixed it as follows using examples here. Thank you (Alastair Maw).
问题：字形图标在按钮文本上方 2 像素太高。使用此处的示例进行如下修复。谢谢（Alastair Maw）。
I managed to get mine working as follows:
我设法让我的工作如下：
HTML
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
CSS
#panelTopic .glyph_Credit {
vertical-align: middle;
display: inline-block;
padding-bottom:6px;
}
回答by Alastair Maw
None of the methods above worked well for me by themselves, but using display: inline-block; vertical-align: middleon the elements did. It's the inline-blockthat seems to be key.
上面的方法都不适合我自己，但是display: inline-block; vertical-align: middle在元素上使用效果很好。这inline-block似乎是关键。
.vcenter * {
vertical-align: middle;
display: inline-block;
}
.btn i {
margin-left: 10px;
font-size: 20px;
}
with
和
<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>
See http://www.bootply.com/UbY78zM8pDfor live example.
有关实时示例，请参见http://www.bootply.com/UbY78zM8pD。
回答by Timo Türschmann
I managed to do it like this:
我设法这样做：
.glyphicon.center:before {
vertical-align: middle;
}
and use <span class="glyphicon center glyphicon-th"></span>.
并使用<span class="glyphicon center glyphicon-th"></span>.
回答by Mihai Alex
Try vertical-align: middle;on .glyphicon-th:before
尝试vertical-align: middle;在.glyphicon-th:before
回答by rajeshpanwar
<button class="btn btn-default">
<span class="glyphicon glyphicon-th" style="font-size: 14px;"> </span>
<span style="font-size: 17px;">Not Centered</span>
</button>
please increase or decrease the font size according to your requirement
请根据您的要求增加或减少字体大小
回答by Shalini
Other way
另一种方式
<button class="btn default" id="IdBack">
<i class="glyphicon glyphicon-hand-left"></i>
<b>Back</b>
</button>
回答by Will Strohl
Add a margin of the specific pixels or percentage. In my app, this worked beautifully, based on the dimensions of the area.
添加特定像素或百分比的边距。在我的应用程序中，根据该区域的尺寸，这非常有效。
CSS:
CSS：
.someWrapperClass button span {
margin-top: 120%;
}
HTML:
HTML：
<div class="someWrapperClass">
<button type="button" ng-click="SomeMethod()">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
</div>
