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 ``` ``` CSS ``` div { border: 1px solid red; line-height: 40px; padding: 10px 0px; font-size: 14px; } i { margin-left: 10px; font-size: 30px; } ``` HTML ```

Foo bar

```

Accepted Answer

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.

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

Solution

Problem