Paul Paul - 3 months ago 16
CSS Question

How to center text vertically with a large font-awesome icon?

Lets say I have a bootstrap button with a font-awesome icon and some text:

<div>
<i class='icon icon-2x icon-camera'></i>
hello world
</div>


How do I make text appear vertically centered?
Text is aligned with the bottom edge of the icon now: http://jsfiddle.net/V7DLm/1/

EDIT:
I have a possible solution: http://jsfiddle.net/CLdeG/1/ but it feels a bit hacky - introduces extra p tag, uses pull-left and display:table. Maybe someone can suggest an easier way.

Answer

After considering all suggested options, the cleanest solution seems to be setting line-height and vertical-align everything:

See Jsfiddle Demo

CSS:

div {
    border: 1px solid #ccc;
    display: inline-block;
    height: 50px;
    margin: 60px;
    padding: 10px;
}
#text, #ico {
    line-height: 50px;
}

#ico {
    vertical-align: middle;
}
Comments