Paul Paul - 1 year ago 89
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:

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

How do I make text appear vertically centered?
Text is aligned with the bottom edge of the icon now:

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

Answer Source

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

See Jsfiddle Demo


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

#ico {
    vertical-align: middle;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download