如何垂直对齐两行引导按钮中的图标？

Question

你怎么垂直对齐的两线引导按钮的图标，使其看起来像：

<button class="btn btn-lg btn-success" style="text-align:left; width:400px"> 
     Line 1 text<br>Line2 text here <span style="vertical-align:middle;" class="glyphicon glyphicon-earphone pull-right">&nbsp;</span> 
</button> 

目前我的代码会产生这样的：

http://www.bootply.com/jzLeoUKNR3

Answer 1

据我所知，这需要一点点mor e CSS。我叉你Bootply链接在这里：http://www.bootply.com/h24QRPyHbg

我删除了pull-right类从图标，以便它不再浮动，然后加入这个CSS：

• position: relative;上btn（允许图标是 定位的相应地）
• position: absolute; right: 16px; top: 50%; transform: translateY(-50%);上的图标span（垂直居中它在右侧）

全部在一起：

<button class="btn btn-lg btn-success" style="text-align: left; width: 400px; position: relative;"> 
    <span style="position: absolute; right: 16px; top: 50%; transform: translateY(-50%);" class="glyphicon glyphicon-earphone">&nbsp;</span> 
    Line 1 text<br>Line2 text here 
</button>