Add currency inside input with padding and vertical align

Question

I need an input with € or $ currency inside. I have an input with padding (without padding I've no problems)

How I can do it with perfect vertical centering?

I tried this method without optimal results:

1) "Margin-top:auto" and "margin-bottom: auto" method:

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) Fixed height and 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>

In both cases vertical align does not work perfect.

Any ideas?

http://stackoverflow.com/questions/2913236/html-text-input-field-with-currency-symbol — rsn, May 25 '16 at 15:01
http://stackoverflow.com/questions/21016472/adding-dollar-prefix-to-bootstrap-input-box — Hardik Pithva, May 25 '16 at 15:06

score 1 · Accepted Answer · answered May 25 '16 at 15:07

You can use position: absolute and 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>

Add currency inside input with padding and vertical align

1 Answers1