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

vertical-align: middle will work if you set the div display: table-cell
http://jsfiddle.net/M3jxT/484/

Answer 2

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.

Answer 3

Here's a mixin I like to use for general vertical alignment:

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

@include vertical-align;

Works beautifully if you're using Boostrap as well, use a center-block class and it's perfectly centered.