lauralee Posted September 3, 2008 Share Posted September 3, 2008 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 More sharing options...
jlhaslip Posted September 3, 2008 Share Posted September 3, 2008 textarea { text-align: center; }input { text-align: center; } Link to comment Share on other sites More sharing options...
rzea Posted September 3, 2008 Share Posted September 3, 2008 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 More sharing options...
lauralee Posted September 3, 2008 Author Share Posted September 3, 2008 Yes, thanks. Instead of using the "label" element, I should use the "input" element or "textarea" element. Link to comment Share on other sites More sharing options...
jeffman Posted September 3, 2008 Share Posted September 3, 2008 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 More sharing options...
jlhaslip Posted September 4, 2008 Share Posted September 4, 2008 good point on the class suggestion. thanks for the support. Link to comment Share on other sites More sharing options...
lauralee Posted September 4, 2008 Author Share Posted September 4, 2008 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 More sharing options...
Kingy Posted September 4, 2008 Share Posted September 4, 2008 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 More sharing options...
rzea Posted September 4, 2008 Share Posted September 4, 2008 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.