垂直对齐具有不同字体大小的文本

【问题标题】：Vertically align text with different font sizes垂直对齐具有不同字体大小的文本
【发布时间】：2014-10-26 18:02:49
【问题描述】：

我在这里有一个 jsfiddle - http://jsfiddle.net/8bnLkyLv/

    <div class="alert">
        <p><i class="fa fa-exclamation-triangle"></i>This is some text</p>
    </div>

非常简单， 标记包含一个  标记，其中包含一个很棒的字体图标。

 标签需要大于文本。

我需要文本和图标在红色容器中水平居中。

我知道我可以通过绝对定位  标签来做到这一点，但对于如此简单的事情来说，这似乎很麻烦。

【问题讨论】：

标签： html css vertical-alignment text-align

【解决方案1】：

只需给更大内联级元素 - 在这种情况下为  元素 - vertical-align 的 middle。

.alert { background: red; font-family: sans-serif; text-align: center; }

.alert p {
    color: white;
    display: inline-block;
    padding: 5px 0;
    vertical-align: center;
}

.alert p i {
    font-size: 2em;
    padding: 0 10px 0 0;
    vertical-align: middle; /* <-- Added declaration */
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="alert">
    <p>
        <i class="fa fa-exclamation-triangle"></i>
        This is some text
    </p>
</div>

【讨论】：