Vertical align of text in CSS

Question

I am trying to align a Fontawsome Icon (http://fortawesome.github.io/Font-Awesome/) with some text next to it. In this case a phone number next to a - you guessed it - phone icon.

HTML

<p>
    <i class="fa fa-3x fa-phone-square"></i>
    <span class="phone">111 222 333</span>
</p>

CSS

.phone {
    font-size: 1.5em;
    vertical-align: middle;
}

http://jsfiddle.net/ypLN5/

I tried several things playing around with line-height and vertical-align: middle but I haven't come up with a solution.

May you help please?

Answer 1

There is a very very easy way of doing this:

i, span{
    vertical-align:middle;
}

Demo fiddle

Answer 2

SW4's answer is correct.

Although if you are looking to center inside of a bigger element using display: table-cell and will solve your problem:

http://jsfiddle.net/3U2Vj/1/