“正确”永远不会改变垂直对齐方式？

Question

我正在尝试将字体很棒地添加到另一个字体真棒图标的右下角角落。 我想出了以下内容：

 <span class="fa-stack">
    <i class="fa fa-shopping-cart fa-stack-2x"></i>
    <i style="color:red;" class="fa fa-ban fa-stack-1x text-danger overlay-lower-right"></i>
</span>

.overlay-lower-right {
    position: absolute;
    bottom: -10px;
    right: -20px;
}

然而，无论我将正确值放在哪里，图标始终保持水平居中。 只有当我输入左时，它才会改变。

这里有什么问题？我所要做的就是将图标一直放在右边。

这是一个代码的jsFiddle： http://jsfiddle.net/yjh0a23w/1/

Answer 1

在font-awesome.css {}为left: 0设置.fa-stack-1x。

要解决此问题，您必须使用left重置left: auto;，然后设置right位置。

.overlay-lower-right {
    position: absolute;
    bottom: -10px;
    right: -20px;
    left: auto; /* this line reset left: 0; */
}

http://jsfiddle.net/yjh0a23w/2/