将插入符号定位在 Bootstrap 下拉按钮中

Question

我想修改 Bootstrap 下拉按钮，以便在填充后将插入符号从按钮宽度的计算中移出。换句话说，我想通过在每一侧提供相等的填充来使按钮中的文本“居中”，但下拉插入符号仍然在右侧。

我尝试了几件事，包括在按钮上使用相对定位（根本不起作用）和绝对定位（部分起作用但失去垂直定位/居中）。

此外，还有几件事让这变得更棘手：

• 有些下拉菜单没有文字，只有一个图标
• 使用 Font Awesome 添加图标（使用 :before 元素/选择器）

示例 HTML：

<div class="btn-group"
    <button type="button" class="btn btn-default dropdown-toggle fa fa-download">
        <span class="caret"></span>
    </button>
    <button type="button" class="btn btn-default fa fa-envelope"></button>
</div>

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle">
        More <span class="caret"></span>
    </button>
</div>

正如您在“正确”示例中所见，插入符号不再影响按钮的宽度（而是在“内部”按钮的填充，如粉红色线条所示）。有谁知道这怎么可能？谢谢！

更新：

感谢@Dekel 的回答（稍作调整以适应我的需要并适用于两种类型[只有图标的和有文本的]）：

/* I also removed the space in the HTML before the caret, which is where "top" comes in */
.btn.fa .caret {
    left: 5px;
    position: absolute;
    top: calc(50% - 1px);
}
.btn .caret {
    position: absolute;
    top: calc(50% - 1px);
    right: -12px;
}

Codepen Example

Answer 1

我几乎可以肯定这就是您要找的东西：

.btn .caret {
    position: absolute;
    top: calc(50% - 1px);
}

请检查并告诉我。
第二个按钮块没有插入符号作为宽度计算的一部分。我在容器中添加了另一个类来设置这些特定值：
http://codepen.io/anon/pen/aBGrWW

Answer 2

如果您将position: absolute; 应用于插入符号，它将不再影响文本的位置。然后，您可以使用 right 和 top 属性将插入符号定位在您希望它在填充内显示的位置。

例子：

.btn .caret {
    position: absolute;
    right: 10px;
    top: 10px;
}

注意：确保按钮不是 position: static，以便插入符号锚定到按钮（即设为 position: relative;）。