CODEWITHSUNDEEP
htmlcssfont-awesome
Wizzard
Wizzard

Reputation: 12712

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

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>

Upvotes: 5

Views: 36990

Answers (4)

Simy
Simy

Reputation: 11

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;

example

Upvotes: 1

Marc Audet
Marc Audet

Reputation: 46825

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.

Upvotes: 21

G.L.P
G.L.P

Reputation: 7217

Do you want something like this 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;
}

Upvotes: 0

Javi Mu&#241;oz Tous
Javi Mu&#241;oz Tous

Reputation: 88

Did you try to display the div like a table like this?

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;
}

Upvotes: 0

Related Questions