Home/ Questions/Q 7708265
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T00:34:09+00:00

Dear community members, I have a small problem, which involves a text input field

  • 0

Dear community members,

I have a small problem, which involves a text input field with letter-spacing. For example the following code:

<input type="text" style="letter-spacing:1em; text-align:center;" maxlength="6" id="code" name="code" />

This would cause the text not center properly due to the last letter-spacing at the last letter. Are there alternative methods in which I can achieve spacing, but also text centering capabilities? All solutions are appreciated (incl. javascript and JQuery).

(The user enters a string of 6 characters long, with no spaces.)

Thanks for the response!

PS: I do not think that I forgot any relevant code, because the em can also be replace with 10px. I have a screenshot here: http://www2.picturepush.com/photo/a/7889005/640/7889005.png

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What about adding a padding-left of 1em?

    <input type="text" style="letter-spacing:1em; text-align:center; padding-left: 1em" maxlength="6" id="code" name="code" />

    Here is an example, with the maxlength removed and a width added, so you can see that it is centered properly:

    http://jsfiddle.net/Jgm42/

    Note: This looks to only be an issue with some browsers. IE, shockingly, seems to correctly leave off the extra spacing unless there is an adjacent character. You might have to do some browser-specific code.

    • 0