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

Question

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

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 将 F 图标定位: absolute; 和 left top 属性

Demo

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

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