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

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;

}