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

Question

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

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

这是一个非常简单的<p>标记，其中包含一个<i>标记，用于收集字体真棒图标。

<i>代码需要大于文字。

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

我知道我可以通过绝对定位<i>标签来实现它，但对于这么简单的事情来说，这似乎很麻烦。

Answer 1

只需提供更大的内联级元素 - 在这种情况下为<i>元素 - 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>