Html 将文本与浮动：在图标之前对齐

我正在为Azure Active Directory B2C开发一种按钮样式。Azure自动提供以下内容

<div class="options">
    <div>
        <button class="accountButton firstButton" id="AmazonExchange" tabindex="1">Amazon</button>
    </div>
    <div>
        <button class="accountButton" id="LinkedInExchange" tabindex="1">LinkedIn</button>
    </div>
    <div>
        <button class="accountButton" id="FacebookExchange" tabindex="1">Facebook</button>
    </div>
    <div>
        <button class="accountButton" id="GoogleExchange" tabindex="1">Google+</button>
    </div>
    <div>
        <button class="accountButton" id="MicrosoftAccountExchange" tabindex="1">Microsoft</button>
    </div>
</div>

这很好，但我希望图标稍微大一点。但是，将项目的大小增大会导致主文本向上移动，因为它与float:left的顶部对齐

我尝试过各种各样的有效组合，但运气不佳。我无法更改html（因为它是动态生成的）。如何使用较大的图标将“亚马逊”居中？（请注意，亚马逊文本现在高于LinkedIn和其他文本。）

---

尝试的JSFIDLE看起来不太一样，但应该会显示问题。

---

给

一个
行高度
。accountButton
可能会为您纠正此问题。这将使文本在给定的垂直空间内垂直居中，并且在您的示例中应等于按钮的所需高度

试试这样：
行高：30px
没有一种动态方法可以使用浮动元素调整valign。您可以使用
display:inline块+
垂直对齐：中间对齐

.accountButton {
  vertical-align: middle;
  line-height: 1.5;
}
.accountButton:before {
  vertical-align: middle;
  margin-right: 8px;
}


或者，使用
display:flex+
对齐项目：居中

.accountButton {
  display: flex;
  align-items: center;
  line-height: 1.5;
}
.accountButton:before {
  margin-right: 8px;
}


行高
部分只是为了使按钮更高一点，您也可以使用
填充顶部
+
填充底部
。
使用float，您需要使用边距顶部或底部2px，-2px等来调整偏移，垂直对齐仅适用于内联级别的元素，您也可以尝试flexbox。我可以尝试，尽管我担心使用非常具体的偏移量来实现这一点。如果字体大小改变怎么办？一个使用内联块和flexbox的例子，对我来说很有用！如果你写的解决方案，我可以选择它。张贴完全相同的代码，在演示加上一些说明。
.accountButton {
  display: flex;
  align-items: center;
  line-height: 1.5;
}
.accountButton:before {
  margin-right: 8px;
}