There is a very very easy way of doing this:
i, span{
vertical-align:middle;
}
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;
}
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?
Solution
OTHER TIPS
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: