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 {{1将position: absolute;分配给您的容器元素，left F 图标属性

Demo

top

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

1 个答案: