Attempting to position font awesome icon in the middle of a div

Question

I have a basic div with an icon and some text. If I don't try and change the size of the icon it lines up perfect.

But I want the icon to be bigger but still sit centred in the text. The problem is the icon doesn't sit centred in the div, it seems to move up so the text ends up lined to the bottom of the icon and the icon sits higher in the div. I expect the text to be centred in the icon as the icon would be centred in the div....

You can see it on this fiddle; http://jsfiddle.net/8mjN7/1/

Pulling in

<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

The simplest solution is to use the vertical-align property as follows:

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

see demo at: http://jsfiddle.net/audetwebdesign/9ATq8/

Note: It is necessary to specify height: 30px for the i element and line-height: 40px of the parent container, otherwise, any default values may not work as expected.

CSS table-cell also works but the added complexity is not needed in this case.

Answer 2

I use this to make sure the icon is in the middle. The padding & line-height i think are the two most important.

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;