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

如何垂直对齐两行引导按钮中的图标，使其看起来像：

第1行文本
此处第2行文本

目前，我的代码生成以下内容：

---

据我所知，这需要更多的CSS。我在这里分叉了你的引导链接：

我从图标中删除了

pull right

类，使其不再浮动，然后添加了以下CSS：

• 位置：相对btn

  上的code>（允许显示图标 相应定位）

• 位置：绝对位置；右：16px；最高：50%；转化：translateY（-50%）span

  上的code>（在右侧垂直居中）

总而言之：

<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>

第1行文本
此处第2行文本

<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>