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
If you want to make a text appear vertically aligned next to a Font Awesome icon, you can use the CSS vertical-align property set to “middle” and also, specify the line-height property. Change the size of the icon with the font-size property.
The most preferred way to center Font Awesome Icons is to assign a center class to each <i> tag. Setting width to 100%, let's each icon cover 100% area horizontally. Also text-align then centers the icon accordingly to the width being used.
The trick is to use justify-content: center to align the icon center in the circle and use align-items: center to vertically align the icon in the circle.
To center a div vertically on a page, you can use the CSS position property, top property, and transform property. Start by setting the position of the div to absolute so that it's taken out of the normal document flow. Then set the top property to 50%.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With