How to center align font awesome icons vertically in a circle div?

Question

I\'m trying to center align font awesome icons center by vertically. If there is text we can do it using line-height property even i tried giving the lin

Answer 1

You can use line-height to align the icon in the div.

Try adding this .fa-camera-retro { line-height: inherit;} to your css. Using inherit makes line-height take on the height of its containing div, so all icons will be centered even if those divs are different sizes. If you want, you can also set the line-height to the div's height in pixels to explicitly center it, ie line-height: 80px .

Here's the example working in a fiddle.