twitter-bootstrap 如何将引导程序图标与按钮中的文本对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14365841/
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
How to align bootstrap icon with text in button?
提问by SunnyShah
How to align bootstrap icon and image to bottom? ( I am using font-awsome for icons ).
如何将引导程序图标和图像对齐到底部？（我对图标使用 font-awsome ）。
JSBIN: http://jsbin.com/uwupuz/2/edit
JSBIN：http://jsbin.com/uwupuz/2/edit
<div class="btn-group">
<a class="btn" href="#">
<i class="icon-plus"></i>
<span>Add</span>
</a>
<a class="btn" href="#">
<i class="icon-trash"></i>
<span>Remove</span>
</a>
<a class="btn" href="#">
<i class="icon-edit"></i>
<span>Edit</span>
</a>
</div>
采纳答案by jonschlinkert
Try this: http://jsfiddle.net/jonschlinkert/CBss2/1/this is what it looks like after applying line-height: 1;
试试这个：http: //jsfiddle.net/jonschlinkert/CBss2/1/这是申请后的样子line-height: 1;
I wouldn't mess with the positionproperty as suggested by @hajpoj, there are cleaner ways to fix the problem that won't have cascading effects later. The other problem with using position: relativeis that each icon is actually a little bit different in size. You want to try to keep maintenance down by accounting for that. It's best to make it appearas if it's bottom-aligned for most normal sized icons, and when a larger-than-average icon is used it is centered properly with the text. Using position: relativea larger icon will push above the others and look off-center.
我不会position像@hajpoj 所建议的那样弄乱属性，有更干净的方法可以解决以后不会产生级联效应的问题。使用的另一个问题position: relative是每个图标的大小实际上都有点不同。您想尝试通过考虑这一点来减少维护。对于大多数正常大小的图标，最好使它看起来像底部对齐，并且当使用大于平均水平的图标时，它会与文本正确居中。使用position: relative较大的图标将推高其他图标并看起来偏离中心。
回答by hajpoj
You can use position relative.
您可以使用相对位置。
i {
position: relative;
bottom: 1px; // or however much you want to offset it by
}
