试图在div中间放置字体真棒图标

Question

我有一个带图标和一些文字的基本div.如果我不尝试改变图标的​​大小,它就会完美排列.

但我希望图标更大但仍然在文本中居中.问题是图标不会居中在div中,它似乎向上移动,因此文本最终排列在图标的底部,图标位于div的较高位置.我希望文本在图标中居中,因为图标将以div为中心....

你可以在这个小提琴上看到它; http://jsfiddle.net/8mjN7/1/

拉进来

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

CSS

div {

    border: 1px solid red;
    line-height: 40px;
    padding: 10px 0px;
    font-size: 14px;
}

i {
    margin-left: 10px;
    font-size: 30px;
}

HTML

<div>
    <i class="fa fa-globe"></i>
    Foo bar
</div>

Answer 1

最简单的解决方案是使用vertical-align如下属性:

i {
    margin-left: 10px;
    font-size: 30px;
    height: 30px;
    vertical-align: middle;
}

请参阅演示:http://jsfiddle.net/audetwebdesign/9ATq8/

注意:必须height: 30px为i元素和line-height: 40px父容器指定,否则,任何默认值都可能无法按预期工作.

CSS表格单元也可以工作,但在这种情况下不需要增加复杂性.