将文本与图标中间的新行对齐

Question

前面有一个带有文字的图标。我可以使用style="vertical-align: middle;"

将图标中间的文字对齐

以下工作正常：

<i class="fa fa-arrows-alt fa-5x" style="vertical-align: middle;"></i> a Big Arrow.

问题是当我们添加<br>时，对齐不再起作用（因为图标是简单的字符）

<i class="fa fa-arrows-alt fa-5x" style="vertical-align: middle;"></i> a Big Arrow </br> I mean very Big!

请参阅http://jsfiddle.net/tQYTB/1/

你能告诉我什么是最好的解决方案！

Answer 1

每当您想要更改内容的某些部分时，请使用span标记.......

span {
  display: inline-block;
    vertical-align: middle;

}

Answer 2

在这里：http://jsfiddle.net/tQYTB/3/

基本上，将标签文本包装在范围

中

HTML

<i class="fa fa-arrows-alt fa-5x" style="vertical-align: middle;"></i>
<span class="label">a Big Arrow. <br/> I mean real Big</span>

CSS

.label {
    display: inline-block;
    vertical-align: middle;
}