将facebook图标与按钮中的文本对齐

Suresh Pattu 发表于 Dev

苏雷什·帕图（Suresh Pattu）

我一直在这里尝试
无法获得输出。实际上，我想使图标和按钮内的文本居中对齐。
请帮我解决这个问题
这是我的jsfiddle这里

HTML代码：

<p class="SecWrapper">
    <a href="" class="fbLogin fbBtn clearfix">
        <span style="margin:0 auto;">
            <i class="fbIcon spriteIcon"></i> 
            <i class="pull-left">Log In with Facebook</i>
        </span>
    </a>
</p>

CSS代码：

.SecWrapper{width:300px;}

.fbBtn,a.fbBtn{padding: 13px;
                background: #2a6496;
                width: 100%;
                display: block;
                color: #fff;
                text-align:center;
                }

a.fbBtn:hover,.fbBtn:hover{color: #fff;}

.spriteIcon{float: left;
            background: url(http://i.imgur.com/egJconX.png) no-repeat;
            }

.fbIcon{background-position: -9px -65px;
        width: 20px;
        height: 25px;
        }

外星人先生

使用CSS定位在这里，分配position: relative;给您的容器元素，并position在˚F使用图标position: absolute;和left top性能

演示版

.SecWrapper{
     width:300px;
     position: relative;
}

.fbIcon{
     background-position: -9px -65px;
     width: 20px;
     height: 25px;
     position: absolute;
     left: 70px; 
     top: 10px;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。