Question

我试图通过垂直居中对齐字体真棒图标。如果有文字，我们可以使用line-height属性来执行此操作，即使我尝试将line-height高度与div的高度相同。

尝试display:inline-block而vertical-align:middle没有做到这一点。

如何以所有尺寸垂直居中图标。它应该是动态的，因为图标大小可能不同。因此，margin-top的硬编码可能不会适用于其他尺寸的图标以及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

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

尝试将此.fa-camera-retro { line-height: inherit;}添加到您的CSS中。使用inherit会使line-height获取其包含div的高度，因此即使这些div的大小不同，所有图标也会居中。如果需要，您还可以将line-height设置为div的高度（以像素为单位）以明确居中，即line-height: 80px 。

以下是 fiddle 中的示例。

Answer 2

不要偏离上述功能完美的解决方案，但Font Awesome 4具有很好的堆叠功能，可以使用以下代码。

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

有一些非常好的选项和组合可以是found here。

Answer 3

设置字体真棒的类例如.fa-vc 然后将其添加到您希望它与其他文本对齐的所有字体真棒字体。你的代码看起来像（这个样本是'x'符号）

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

和将此类设置为

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

这将覆盖字体awesome的默认设置（line-height：1px）

问题解决了......

Answer 4

这是我喜欢用于一般垂直对齐的mixin：

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

@include vertical-align;

如果您正在使用Boostrap，请使用center-block课程，并且它完全居中。

Answer 5

如果您设置vertical-align: middle div为http://jsfiddle.net/M3jxT/484/

，

display: table-cell将有效

Answer 6

这个问题是在4年前提出的，技术和浏览器兼容性已经发生了很大变化。另一种更现代的方法是使用Flexbox。它是可缩放的，您可以设置单个元素的样式，而不必设置父元素和子元素的样式。

此方法的奇妙之处在于，如果您更新宽度或高度，它将自动更新，而不会更新任何其他东西，使其垂直和水平居中。

优点：它可以与单个字体图标一起工作

缺点：：如果您想使用字体图标加上诸如“下载”之类的文本，则需要删除“宽度”，它仍然可以按预期工作

示例：

.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;
}

工作示例： http://jsfiddle.net/iandonahue/M3jxT/1409/

Answer 7

相等的line-height和text-align：center非常适合在中间垂直和水平制作图标。但是，如果你想以动态的方式使任何事物在垂直和水平方向上居中，那么像这样的代码 -

标记：

<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

使用fa-fw类使它们正确对齐。

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

检查它的实际效果。 http://jsfiddle.net/ahj0ncpa/

Answer 9

我在chrome和Mozilla中垂直对齐字体真棒图标时遇到了类似的问题。

我有一个div包装我的字体真棒元素。

我的HTML是：

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

在 em 中给出字体大小解决了这个问题。

如何在圆形div中垂直居中对齐字体真棒图标？

9 个答案: