パディングと垂直方向のアラインメントで通貨を追加する

Question

内部に€または$ currencyの入力が必要です。私はパッディングの入力を持っています（パディング無しで問題はありません）

私は完璧な垂直センタリングで何ができるのですか？

Iは、最適な結果なしにこの方法を試してみました：

1） "マージントップ：自動" と "マージン底：自動" 方法：

div {position:relative} 

input {padding: 1em} 

.currency { 
position:absolute; 
right:0.4em; 
height:50%; 
top:0; 
bottom:0; 
margin-top:auto; 
margin-bottom:auto 
} 

<div> 
<input type="text"> 
<span class="currency">€</span> 
</div> 

2）固定高さとマージントップのネガ：

div {position:relative} 

input {padding: 1em} 

.currency { 
    position:absolute; 
    right:0.4em; 
    height:3em; 
    top:50%; 
    margin-top:-1.5em; 
} 

<div> 
<input type="text"> 
<span class="currency">€</span> 
</div> 

どちらの場合も、垂直整列は完璧に働きます。

アイデア？

Answer 1

を使用でき

position: absoluteとtransform: translateY(-50%)

div { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
input { 
 
    padding: 1.2em; 
 
    text-align: right; 
 
} 
 
.currency { 
 
    position: absolute; 
 
    right: 5px; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<div> 
 
    <input type="text"> 
 
    <span class="currency">€</span> 
 
</div>