Dear munity 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: .png

Dear munity 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./photo/a/7889005/640/7889005.png

• javascript
• html
• css

Share Improve this question Follow edited Mar 26, 2012 at 17:16 Snowflake asked Mar 26, 2012 at 17:09 SnowflakeSnowflake 3,09133 gold badges2828 silver badges4545 bronze badges 2

• not nearly enough information here to understand the issue. – DA. Commented Mar 26, 2012 at 17:10
• It looks pretty well centred in Chromium/Ubuntu... – David Thomas Commented Mar 26, 2012 at 17:16

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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