Jump to content
lauralee

center text in form input boxes

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?

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Yes, thanks. Instead of using the "label" element, I should use the "input" element or "textarea" element.

Share this post


Link to post
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.

Share this post


Link to post
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?

Share this post


Link to post
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?

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...