使用填充和垂直对齐在输入内添加货币

Question

我需要输入里面有€或$货币的输入。我有填充的输入（没有填充我没有问题）

如何通过完美的垂直居中来实现这一目标？

我尝试了这种方法没有得到最佳结果：

1）“Margin-top：auto”和“margin-bottom：auto”方法：

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%)

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;