在字体图标内居中文本

Question

我有一个字体图标，它位于某些文本的正下方。我希望文本位于图标的中间（内部）。如果我使用诸如填充之类的措施来推送文本，那将是一个糟糕的解决方案，因为文本可能会根据大小和周围的其他元素而移动。

http://jsfiddle.net/gkAFD/

HTML：

<i class="fi-cloud"></i>
<span>Text</span>

CSS：

i {
  font-size: 63px;
}

span {
  color: red;
}

Answer 1

您需要将display: inline 和vertical-align:middle 添加到您的图标。

i {
    font-size: 63px;
    display: inline;
    vertical-align: middle;
}

Updated fiddle

Answer 2

i {
    font-size: 63px;
    vertical-align: middle;
}

span {
    color: red;
    margin-left: -45px;
}

JSFIDDLE