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

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) 固定高度和 margin-top negative:

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>