twitter-bootstrap Bootstrap 3 - 在按钮内垂直对齐字体很棒的图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18702625/
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
Bootstrap 3 - Align font-awesome icon inside button vertically
提问by Jason Finley
I am trying to align some font-awesome arrow vertically inside two Bootstrap buttons.
我试图在两个 Bootstrap 按钮内垂直对齐一些字体很棒的箭头。
Actually both the text and the icons should be vertically aligned in the middle of the button.
实际上，文本和图标都应该在按钮的中间垂直对齐。
If the text inside falls into a single line or wraps in multiple ones the arrow icon should always adjust to the middle of the total height of the button, if that makes sense.
如果里面的文字变成一行或多行，箭头图标应该总是调整到按钮总高度的中间，如果这是有道理的。
I've been trying to sort this one out for hours now but for the life of me I can't figure this out.
我一直试图解决这个问题几个小时，但对于我的生活，我无法解决这个问题。
Here's the markup:
这是标记：
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<button type="button" class="btn btn-block btn-foo1"><span> this is <br>button<br>one</span><i class="icon-angle-right"></i></button>
<button type="button" class="btn btn-block btn-foo2"><span>this is button two</span><i class="icon-angle-right"></i></button>
</div>
</div>
and here's a jsFiddle(updated) with what I currently have. Please note that the red background of the icons should touch the edges of the button (top/bottom/right) as opposed to what it is now.
这是我目前拥有的jsFiddle（更新）。请注意，图标的红色背景应该接触按钮的边缘（顶部/底部/右侧），而不是现在的样子。
回答by Kris Hollenbeck
Set both elements to display inline-block and then set the span to take up a percentage of the space. In this case 90% / 10% seems to work good.
将两个元素都设置为显示 inline-block，然后将 span 设置为占据一定百分比的空间。在这种情况下，90% / 10% 似乎效果很好。
span {
vertical-align:middle;
display:inline-block;
width:90%;
}
To remove the padding you can do this: (probably want to add a some left padding)
要删除填充，您可以执行以下操作：（可能想要添加一些左填充）
.btn-foo1,
.btn-foo2 {
padding:0;
border:0;
}
Change display to inline block, and remove right float:
将显示更改为内联块，并删除右浮动：
.btn-foo1 [class^="icon-"],
.btn-foo2 [class^="icon-"],
.btn-foo1 [class*=" icon-"],
.btn-foo2 [class*=" icon-"] {
background-color: red;
display:inline-block;
vertical-align:middle;
padding:24px;
width:10%;
}
Demo:
演示：
Also I would add a class to the span, instead of using span {}use myClass {}.
此外，我会向跨度添加一个类，而不是使用span {}use myClass {}。
