Bootstrapドロップダウンボタンにキャレットを配置する

Question

ブートストラップドロップダウンボタンを変更して、パディング後のボタン幅の計算からキャレットを移動したいと考えています。言い換えれば、私は両サイドに等しいパディングを提供することで、ボタンのテキストを「中央に配置」したいが、ドロップダウンキャレットはまだ右に置いておく。

私は（部分的に働いたが、縦位置/センタリングを失っ）ボタンを相対位置を使用してを含むいくつかのもの、（すべてでは動作しませんでした）と絶対配置を試してみました。

はまた、このトリッキー作るいくつかあります：

アイコンが素晴らしいフォントが追加され

• いくつかのドロップダウンにテキストを持っていない、唯一のアイコンを

（: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> 

「正しい」例でわかるように、キャレットはボタンの幅に影響を与えなくなりました（ただし、ピンクの線で示されたボタンのパディングの「内側」です）。誰でもこれがどのように可能か知っていますか？ありがとう！

UPDATE：答えを@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; 
} 

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

：私は、これはあなたが探しているもので、ほぼ確信している

Codepen Example

Answer 1

私に確認してお知らせください。
2番目のブロックのブロックは、幅計算の一部としてキャレットがありません。
http://codepen.io/anon/pen/aBGrWW

Answer 2

あなたがキャレットにposition: absolute;を適用する場合、それはもはや、テキストの位置には影響しません：私は、これらの特定の値を設定するためにコンテナに別のクラスを追加しました。 rightおよびtopプロパティを使用して、パディング内に表示する位置にキャレットを配置できます。

例：

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

注：キャレットが（すなわち、それposition: relative;作る）ボタンに固定されるように、静的：確認ボタンが位置以外のものであることを確認してください。