如何在圆形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 line-height same height as height of the div.

Tried display:inline-block and vertical-align:middle didn't do the trick.

How to center the icons vertically in all size. It should be dynamic because the icon size may differ. So a hardcode of margin-top may won't work for other size of icon as well div.

CODE

.exp{
    width:80px;
    height:80px;
    background-color:red;
    border-radius:100%;
    line-height:80px;
    text-align:center;
    vertical-align:middle;
    display:inline-block;
}

JSFIDDLE

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 .

Answer 2

Not to detract from the above solution which functions perfectly, but Font Awesome has a great inbuilt stacking feature that can be used with the following code:

FontAwesome 4x

<span class="fa-stack fa-2x">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>

Full documentation and working examples can be found here .

FontAwesome 5x

FontAwesome 5 works in exactly the same way. Just need to adjust the FontAwesome icons to match the new classes for different styles.

<span class="fa-stack fa-2x">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>

Full documentation and working examples can be found here .

Answer 3

Set a class for font awesome such as .fa-vc then add it to all font awesome font you want it to be aligned with other text. your code will looks like(this sample is a 'x' sign)

<i class="fa fa-times fa-vc"></i>

and set this class to

.fa-vc{line-height:inherit!important;}

this will override font awesome's default setting (line-height:1px)

problem solved...

Answer 4

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.

Answer 5

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

Answer 6

This question was asked +4 years ago and technology and browser compatibility has changed quite a lot. Another, more modern approach is use of Flexbox. It's scaleable and you can style a single element instead of styling the parent element and the child element.

What is wonderful about this approach is if you update the width or height, it will automatically with out updating anything else stay vertically and horizontally center.

Pros: It works with a single font-icon no problem

Cons: If you want to use a font-icon plus text like, "download" you will need to remove the "width" and it will still work as intended

Example:

.exp {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 30px;
    width: 30px;
    padding: 10px;
    color: white;
    background-color: green;
    border-radius: 50%;
    box-sizing: border-box;
}

Working Example: http://jsfiddle.net/iandonahue/M3jxT/1409/

Answer 7

the equal line-height and text-align: center works very well to make icon in the middle both vertically and horizontally. However, if you want to make anything centered both vertically and horizontally in a dynamic way, code like this -

markup:

<div class="container>
   <div class="target">
   </div>
</div>

css:

.container{
   position: relative;
}

.target{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}

Answer 8

I faced a similar problem to vertical aligning a font awesome icon in chrome and Mozilla.

I had a div wrapping my font awesome element.

My HTML is:

<div class="icon-wrap">
    <span class="fa fa-times"></span>
</div>

giving font size in em solved the problem.

Answer 9

Using the fa-fw class makes them correctly aligned.

<div class="col-sm-1"> 
    <i class="fa fa-mobile fa-fw"></i>
</div>

Check it in action. http://jsfiddle.net/ahj0ncpa/