Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

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

like image 639
rram Avatar asked Dec 30 '13 01:12

rram


People also ask

How do I center font awesome icons vertically?

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.

How do I center Font Awesome icon in Div?

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.

How do I center an icon in a circle in CSS?

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.

How do I center a div tag vertically?

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%.


1 Answers

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.

like image 140
agconti Avatar answered Sep 24 '22 13:09

agconti