如何在双行自举按钮中垂直对齐图标？

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>