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

Question

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 1

I just had to do this myself, you need to do it the other way around.

• do not play with the vertical-align of your text
• play with the vertical align of the font-awesome icon

<div>
  <span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
  <span class="my-text">hello world</span>
</div>

Of course you could not use inline styles and target it with your own css class. But this works in a copy paste fashion.

See here: Vertical alignment of text and icon in button

If it were up to me however, I would not use the icon-2x. And simply specify the font-size myself, as in the following

<div class='my-fancy-container'>
    <span class='my-icon icon-file-text'></span>
    <span class='my-text'>Hello World</span>
</div>

.my-icon {
    vertical-align: middle;
    font-size: 40px;
}

.my-text {
    font-family: "Courier-new";
}

.my-fancy-container {
    border: 1px solid #ccc;
    border-radius: 6px;
    display: inline-block;
    margin: 60px;
    padding: 10px;
}

for a working example, please see JsFiddle