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

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

据我所知，这需要更多的 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>