css – 居中FontAwesome图标垂直和水平

前端之家收集整理的这篇文章主要介绍了css – 居中FontAwesome图标垂直和水平前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我目前使用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/

解决方法

这是你需要的,不需要包装:
.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/

猜你在找的CSS相关文章