如何中心对齐字体真棒图标垂直在一个圆形div？ [英] How to center align font awesome icons vertically in a circle div?

问题描述

我正在尝试将中心对齐字体真棒图标居中垂直。如果有文本，我们可以使用 line-height 属性，即使我试着给予 line-height

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.

尝试 display：inline-block 和 vertical-align：

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

如何在所有大小中垂直放置图标。它应该是动态的，因为图标大小可能不同。因此，margin-top的hardcode可能无法用于其他大小的图标和div。

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

推荐答案

您可以使用 line-height 将 div 中的图标对齐。

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

尝试添加此 camera-retro {line-height：inherit;} 到你的css。使用 inherit 使 line-height 占用其包含div的高度，因此所有图标都将居中div是不同的大小。如果你愿意的话，你也可以把 line-height 设置为div的高度（以像素为单位），使它显式地居中。例如 line-height：80px
。

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.

这篇关于如何中心对齐字体真棒图标垂直在一个圆形div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！