如何將輸入值和上一個文本水平居中

Question

對不起，我的英語不好。 我有一個跨度（如$）和一個輸入，當用戶輸入某些內容時，跨度和輸入應始終保持水平居中。 我希望它看起來像下面的代碼中的第1行。 但實際上，我可以像第2行一樣對它進行編碼。

我想要一個解決方案，沒有js會更好。 我已經讀過這篇文章（ 帶有貨幣符號的HTML文本輸入字段 ），但是它不能解決我的問題，因為它不會使任何內容居中。

 .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> 

Answer 1

您只需將$放入值中，它將隨值一起移動。

 .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> 

但是，如果您希望永久存在，就需要沒有javascript才能將輸入字段居中

Answer 2

您的代碼使$符號和文本輸入居中對齊。 問題是您沒有為輸入字段指定任何寬度。 您可以通過在輸入字段中指定寬度來解決此問題。

希望能幫助到你！

 .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>