Вертикально выравнивать текст с другим шрифтом размером

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>