中心文本字体图标内

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