垂直和水平居中FontAwesome图标

时间:2013-07-14 19:33:39

标签: css twitter-bootstrap font-awesome

我目前正在使用FontAwesome,并且很难将图标垂直和水平放置在容器中。我试过通过定位来做这件事并遇到问题bc图标大小不同。我基本上有水平,我试图得到垂直。

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

7 个答案:

答案 0 :(得分:43)

这就是你所需要的,不需要包装器:

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

答案 1 :(得分:13)

我使用transform来纠正偏移。它适用于像生命圈这样的圆形图标。

nginx: [emerg] BIO_new_file("/etc/tls/server.crt") failed (SSL: error:02001002:system library:fopen:No such file or directory:fopen('/etc/tls/server.crt','r') error:2006D080:BIO routines:BIO_new_file:no such file)

答案 2 :(得分:7)

所以我终于得到了它(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>

答案 3 :(得分:5)

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

SecureRandom

答案 4 :(得分:1)

我只是将.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;
}

答案 5 :(得分:0)

如果您使用的是Twitter Bootstrap,请将类文本中心添加到您的代码中。

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

答案 6 :(得分:0)

我只是设法将图标居中并使其成为容器,而不是将它们放入一个容器。

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