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

Question

我一直在这里尝试
我无法获得输出。 实际上，我想使图标和按钮内的文本居中对齐。
请帮我解决这个问题
这是我的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;
        }

Answer 1

在此处使用CSS定位，分配position: relative; 到您的容器元素并使用position: absolute; 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;
}