html - 垂直对齐不同字体大小的文本

Question

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

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

super 简单，<p>包含 <i> 的标签包含 Font Awesome 图标的标签。

<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>