我一直在尝试 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;
}
最佳答案
在此处使用 CSS 定位,将 position: relative;
分配给您的容器元素,并使用 position 将 F 图标
和 定位
: absolute;left
top
属性
.SecWrapper{
width:300px;
position: relative;
}
.fbIcon{
background-position: -9px -65px;
width: 20px;
height: 25px;
position: absolute;
left: 70px;
top: 10px;
}
关于html - 将 facebook 图标与按钮中的文本对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20835174/