Html 按钮中带有图标的垂直居中文本

我正在尝试将按钮中的文本与字体图标垂直对齐。这是我尝试的代码：

<button class="btn btn-primary"><span style="padding-top: -50px;">Sign in with</span>
<i class="fa fa-linkedin-square" style="font-size:3em;"></i></button>

使用登录

小提琴：

---

行高

也不起作用。这里有什么问题？

只需在图标上使用垂直对齐：中间“

使用

style=“font size:3em；垂直对齐：中间；”

查看运行中的代码，请尝试以下操作

<button class="btn btn-primary">
<span style="padding: 10px;display: block;float: left;">Sign in with</span>
<i class="fa fa-linkedin-square" style="font-size:3em;float: right;"></i>
</button>

登录

试试这个：

CSS:

.center-content {
  display:table-cell;
  vertical-align:middle;

}

HTML:

登录

尝试

显示：表格单元格

和

垂直对齐：中间

但这会使图标转到新行，请添加有关实际解决方案的更多信息；不要只是发布JSFIDLE链接！

<button class="btn btn-primary">
    <span class="center-content">Sign in with</span>
    <span class="center-content">
      <i class="fa fa-linkedin-square" style="font-size:3em;"></i>
    </span>
</button>