Css 将插入符号置于引导下拉按钮中

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

我试过几种方法，包括在按钮上使用相对定位（根本不起作用）和绝对定位（部分起作用，但失去了垂直定位/定心）

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

• 有些下拉列表没有文本，只有一个图标
• 图标与字体Awesome一起添加（使用

  ：在
  元素/选择器之前）

示例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>

---

我几乎可以肯定这就是您想要的：

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

请检查并让我知道。
第二块按钮没有插入符号作为宽度计算的一部分。我向容器中添加了另一个类来设置这些特定值：

---

如果应用

位置：绝对到插入符号，它将不再影响文本的位置。然后，您可以使用
right
和
top
属性将插入符号放置在希望其显示在填充中的位置

例如：

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

注意：确保按钮不是位置：静态的，以便插入符号固定在按钮上（即使其
位置：相对；
）。
您能提供一个示例吗？（jsfiddle/snippet/codepen）@Dekel谢谢，我忘了将它添加到原始消息中。现在这似乎对我有用，谢谢！我删除了HTML中添加的空间，而是使用
left:
进行补偿（更干净）
.btn.fa.caret{left:5px；position:absolute；top:calc（50%-1px）；}.btn.caret{right:-12px；position:absolute；top:calc（50%-1px）；}
感谢您的回复。我认为
top:calc（50%-1px）
比
top:10px更干净（而且响应速度更快），特别是如果我们将来更改按钮/行高/填充。
.btn .caret {
    position: absolute;
    right: 10px;
    top: 10px;
}