试图在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表格单元也可以使用，但在这种情况下不需要增加复杂性。

Answer 2

我用这个来确保图标在中间。填充物和线路高度我认为是最重要的两个。

background: rgba(143, 211, 157, 1);
border-radius: 100%;
color: #FFFFFF;
display: inline-block; 
font-size: 55px; 
height: 45px;
width: 45px;
padding: 40px 45px 40px 35px;
line-height: 45px !important;
transition: .5s;

Answer 3

您是否尝试像这样的表格显示div？

div {
    display:table;
    border: 1px solid red;
    line-height: 40px;
    font-size: 14px;
}

i {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    font-size: 30px;
}

Answer 4

你想要这样的东西 Link

CSS：

div {

    border: 1px solid red;
    line-height: 40px;
    padding: 10px 0px;
    font-size: 14px;
    display:table;
    vertical-align:middle;
    width:100%;
}

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