垂直和水平居中 FontAwesome 图标答案

【问题标题】：Centering FontAwesome icons vertically and horizontally垂直和水平居中 FontAwesome 图标
【发布时间】：2013-07-12 15:37:48
【问题描述】：

我目前正在使用 FontAwesome，并且很难将图标在其容器中垂直和水平居中。我曾尝试通过定位来做到这一点，但在图标大小不同时遇到了问题。我基本上是水平的，并试图获得垂直的。

<div class='container'>
    <div class='row'>
        <div class='offset2 span6 loginContainer'>
            <div class='row'>
                <div class='login-icon'>    
                    <i class='icon-user'></i>
                </div>
                <input type="text"  placeholder="Email" />

            </div>
            <div class='row'>
                <div class='login-icon'><i class=" icon-lock "></i></div>
                <input type="password" class="" placeholder="Password" />
            </div>
        </div>
    </div>
</div>

.login-icon{
    font-size: 40px;
    line-height: 40px;
    background-color:black;
    color:white;
    width: 50px;
    height: 50px;

}
.login-icon [class*='icon-']{
  height: 50px;
  width: 50px;
  display: inline-block;
  text-align: center;
  vertical-align: baseline;
}

http://jsfiddle.net/ncapito/e2UPC/

【问题讨论】：

标签： css twitter-bootstrap font-awesome

【解决方案1】：

这就是你所需要的，不需要包装器：

.login-icon{
    display:inline-block;
    font-size: 40px;
    line-height: 50px;
    background-color:black;
    color:white;
    width: 50px;
    height: 50px;
    text-align: center;
    vertical-align: bottom;
}

http://jsfiddle.net/e2UPC/6/

【讨论】：

您已硬编码line-height 这不是动态的。此处不使用vertical-align。

【解决方案2】：

我使用了变换来纠正偏移。它适用于像救生圈这样的圆形图标。

<span class="fa fa-life-ring"></span>

.fa {
    transform: translateY(-4%);
}

【讨论】：

@ObsidianAge - 如果将 11 行 CSS 换成 3 行不是更好的解决方案（解决我们很多人经常遇到的一个非常普遍的问题），我不知道是什么。
@ObsidianAge 这是为已接受的旧问题添加新答案的正确时间的完美示例。
谢谢！我登录只是为了喜欢这个:)

【解决方案3】：

将图标水平和垂直居中的最简单解决方案：

<div class="d-flex align-items-center justify-content-center">
    <i class="fas fa-crosshairs fa-lg"></i>
</div>

【讨论】：

这个 IMO 是最好和最干净的解决方案，谢谢 :)

【解决方案4】：

所以我终于明白了(http://jsfiddle.net/ncapito/eYtU5/)：

.centerWrapper:before {
    content:'';
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

.center {
    display:inline-block;
    vertical-align: middle;
}

<div class='row'>
    <div class='login-icon'>
        <div class='centerWrapper'>
            <div class='center'> <i class='icon-user'></i></div>
       </div>
    </div>
    <input type="text" placeholder="Email" />
 </div>

【讨论】：

看看我的回答，我觉得你的看起来不太集中

【解决方案5】：

我刚刚将 .login-icon [class*='icon-'] 的高度降低到 28px 这是小提琴：http://jsfiddle.net/mZHg7/

.login-icon [class*='icon-']{
    height: 28px;
    width: 50px;
    display: inline-block;
    text-align: center;
    vertical-align: baseline;
}

【讨论】：

【解决方案6】：

我只是管理了如何将图标居中并将它们变成一个容器而不是将它们放入一个容器中。

.fas {
    position: relative;
    color: #EEE;
    font-size: 16px;
}
.fas:before {
    position: absolute;
    left: calc(50% - .5em);
    top: calc(50% - .5em);
}
.fas.fa-icon {
    width: 60px;
    height: 60px;
    color: white;
    background-color: black;
}

【讨论】：

我尝试使用 flex centering 和 vertical-align center，但我无法弄清楚。如果定位设置为静态或相对，则定位 :before 元素是无效的。

【解决方案7】：

如果您使用 twitter Bootstrap，请将类 text-center 添加到您的代码中。

<div class='login-icon'><i class="icon-lock text-center"></i></div>

【讨论】：

这只会水平居中图标。

【解决方案8】：

你可以使用垂直变换：

<span class="fas fa-user" style="transform: translateY(-10%);"></span>

【讨论】：