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

Question

我正在研究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>

使用FontAwesome和：在css魔术之前，我可以添加一个图标，并修复按钮的宽度

.accountButton {
    border: 1px solid #FFF;
    color: #FFF;
    margin-left: 0;
    margin-right: 2px;
    padding-right: 15px;
    transition: background-color 1s ease 0s;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    text-align: center;
    word-wrap: break-word;
    width: 120px;
    background-color: #5x05050;
    opacity: 0.7;
}

#AmazonExchange:before {
    font-family: fontAwesome;
    content: "\f270";
    //font-size: large;
    float:left;
    width:32px;
    text-align: center;
}

这很好，但我希望这些图标更大一些。但是，将FontAwesome项的大小增加到大会导致主文本上升，因为它与float的顶部对齐：left。

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

尝试jsfiddle，看起来不一样，但应该显示问题。 https://jsfiddle.net/tofutim/0637yknj/9/

Answer 1

给line-height .accountButton可能会为您解决此问题。这将垂直居中于给定垂直空间内的文本，并且在您的示例中应该等于按钮的所需高度。

尝试类似：line-height: 30px;。

Answer 2

使用浮动元素调整valign没有动态方法。您可以使用display: inline-block; + vertical-align: middle;

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

<强> jsFiddle

或者，使用display: flex; + align-items: center;

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

<强> jsFiddle

line-height部分只是为了让按钮更高一些，您也可以使用padding-top + padding-bottom代替。