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

【问题标题】：How to center align font awesome icons vertically in a circle div?如何在圆形 div 中垂直居中对齐字体真棒图标？
【发布时间】：2014-01-16 21:46:00
【问题描述】：

我正在尝试将字体真棒图标垂直居中对齐。如果有文本，我们可以使用 line-height 属性来完成，即使我尝试将 line-height 与 div 的高度相同。

试过display:inline-block 和vertical-align:middle 没有成功。

如何将所有大小的图标垂直居中。它应该是动态的，因为图标大小可能不同。因此，margin-top 的硬编码可能不适用于其他大小的图标以及 div。

代码

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

JSFIDDLE

【问题讨论】：

添加一个新类用于图标本身：.fa-center { line-height: inherit!important; vertical-align: middle; }

标签： html css

【解决方案1】：

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

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

这是在 fiddle 中工作的示例。

【讨论】：

谢谢。我想我应该把line-height 给包含的div。但现在才知道我也应该把它给孩子（.fa-camera-retro）

【解决方案2】：

不要贬低上述完美运行的解决方案，但 Font Awesome 有一个很棒的内置堆叠功能，可以与以下代码一起使用：

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>

完整的文档和工作示例可以是found here。

FontAwesome 5x

FontAwesome 5 的工作方式完全相同。只需调整 FontAwesome 图标以匹配不同样式的新类。

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

完整的文档和工作示例可以是found here。

【讨论】：

这是正确的答案。不需要时使用 put 自定义样式。
如何调整它们的大小？
它们只是自定义字体，因此可以使用font-size 更改大小。它们基于 em 值，因此它们应保持一致的间距和对齐。
链接不再存在，所以这个答案很难利用。
我已经更新了答案以包括 v4 的存档文档以及 v5 的示例和文档

【解决方案3】：

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

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

和将此类设置为

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

这将覆盖 font awesome 的默认设置 (line-height:1px)

问题解决了……

【讨论】：

【解决方案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 类，它完全居中。

【讨论】：

这个 css 工作得很好，不需要我声明 px 单位。无论内容大小或容器如何，图标都将垂直居中...我认为有些人看到了您的代码，也许有些人不明白这是无礼的...您应该总是回答假设人们不知道...毕竟这是我们都来这里的原因。对于未来的读者，只需使用 css position: absolute; top: 50%; transform: translateY(-50%); 并应用到一个类或您的元素并相应地调整它。这应该是@Gothburz 的答案，你应该只用飞机简 css 更新你的答案

【解决方案5】：

vertical-align: middle 将在您设置 div display: table-cell
http://jsfiddle.net/M3jxT/484/ 时工作

【讨论】：

这似乎更适合作为公认的答案，至少对于 fa-minus，+1

【解决方案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/

【讨论】：

【解决方案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%);
}

【讨论】：

【解决方案8】：

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

我有一个 div 包裹了我的字体很棒的元素。

我的 HTML 是：

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

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

【讨论】：

【解决方案9】：

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

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

在行动中检查它。 http://jsfiddle.net/ahj0ncpa/

【讨论】：

这是横向的，问题是纵向的