How can i centered input value and previous text horizontally

Question

Sorry for my poor English. I have a span (like $) and an input, when user inputs something, the span and input should always stay centered horizontally. I want it looks like the row 1 in the code below. But in fact I can just code it like row 2.

I want a solution, it will be better to be without js. I've read about this article(HTML text input field with currency symbol) but it doesn't solve my problem for it doesn't center anything.

.main{
  display:flex;
  align-items:center;
  justify-content:center;
}
.this-should-be-input{
  font-size:36px;
}
.the-input{
  border:none;
  text-align:center;
  
}

<div class="main">
    <span style="font-size:24px;">$</span>
    <div class="this-should-be-input">
        12345
    </div>
</div>
<div class="main">
    <span style="font-size:24px;">$</span>
    <input class="this-should-be-input the-input" value="12345"/>     
</div>

Possible duplicate of [HTML text input field with currency symbol](https://stackoverflow.com/questions/2913236/html-text-input-field-with-currency-symbol) — Smokey Dawson, Jul 03 '18 at 04:59

score 0 · Answer 1 · answered Jul 03 '18 at 04:52

0

You could just put the $ in the value, and it will move with the value.

.main{
  display:flex;
  align-items:center;
  justify-content:center;
}
.this-should-be-input{
  font-size:36px;
}
.the-input{
  border:none;
  text-align:center;
  
}

<div class="main">
    <span style="font-size:24px;">$</span>
    <div class="this-should-be-input">
        12345
    </div>
</div>
<div class="main">
    <input class="this-should-be-input the-input" value="$12345"/>     
</div>

But if you wanted it there permanently you wouldn't be able to center your input field without javascript

answered Jul 03 '18 at 04:52

Smokey Dawson

8,827
19
77
152

Thx for answering, but it's not good. For 1. the $ has a different font-size 2. user can move cursor in front of $, even delete it, that's what I don't want user to do. – CoolGuy Jul 03 '18 at 04:57
Yes so you will need to use javascript, here is a good example https://stackoverflow.com/questions/2913236/html-text-input-field-with-currency-symbol – Smokey Dawson Jul 03 '18 at 04:59
So if I use javascript, what should I do ? Do I have to get the width of the input, and try to position the $? – CoolGuy Jul 04 '18 at 02:53

Jugal M Choksi · Answer 2 · 2018-07-04T06:58:16.000

0

Your code is center aligning both the $ sign and the text input. The problem is that you have not specified any width for the input field. You can fix this by specifying the width to the input field.

Hope it helps!

.main{
  display:flex;
  align-items:center;
  justify-content:center;
}
.this-should-be-input{
  font-size:36px;
}
.the-input{
  border:none;
  text-align:center;
  width:24%;
}

<div class="main">
    <span style="font-size:24px;">$</span>
    <div class="this-should-be-input">
        12345
    </div>
</div>
<div class="main">
    <span style="font-size:24px;">$</span>
    <input class="this-should-be-input the-input" value="12345"/>     
</div>

edited Jul 04 '18 at 06:58

answered Jul 03 '18 at 05:10

Jugal M Choksi

73
1
1
13

I don't know how long the user will input. I can not specify a width to input. – CoolGuy Jul 03 '18 at 06:40
There will be a max length right? I'd suggest you keep that. You can't have dynamically changing width of the input field. I've edited my code to show that. – Jugal M Choksi Jul 04 '18 at 06:55
I may not describe what I want very clearly, ,in your example there is some space between $ and the 12345, that's what I don't want to see. The number user input(12345) should just follow the $ with no extra space. But if you use text-align:left with 12345, then the whole($12345) may not be centered. – CoolGuy Jul 05 '18 at 02:27

How can i centered input value and previous text horizontally

2 Answers2