Jump to content

center text in form input boxes


lauralee

Recommended Posts

I would like to center the text that is typed into a form by the user. Is it possible to do that with CSS? I've tried adding a "class" to the label element in the stylesheet, label .cen{text-align:center;}but that doesn't work. Is there some way to do that so that the text shows up centered in the boxes of the form as it is being typed in?

Link to comment
Share on other sites

One variation to jlhaslip's code is:

textarea.your-class-here {   text-align: center;}input.your-class-here {   text-align: center;}

The ".your-class-here" part will apply ONLY to the form fields you assign that class to, in other words, jlhaslip's code will make ALL your inputs and textareas in your website have the text centered. So, adding the ".your-class-here" part leaves the door open to instances in which you don't want, for whatever reason, the text centered in your form elements.Does that make sense?Hope this helps.

Link to comment
Share on other sites

Yes . . . because the width of a label is determined by the text that fills it. So there's no difference between text alignments. For text to be centered, its container must be bigger. Text inputs and textareas can be given width attributes.To make a "label" with a text input, if you don't want your users editing it and getting confused, set its readonly property to "readonly". And if you adjust the border and background, it won't have to look like an input at all.

Link to comment
Share on other sites

I just added input .cen{text-align:center;}to my stylesheet and then<input class="cen" .....to my form input, but I get no results. Am I missing something?

Link to comment
Share on other sites

No results? You mean the text doesn't align to center?Or there are no values in there straight from the start? If it's the first you can even try this.<input style="text-align:center;"> </input>or the latter maybe something like this.<input style="text-align:center;" value="hello"> </input>Do any of those help or is there something else you meant?

Link to comment
Share on other sites

I just added input
*
.cen{text-align:center;}to my stylesheet and then<input class="cen" .....to my form input, but I get no results. Am I missing something?

Remove the SPACE* before the dot.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...