text-align center won t work with form label tag

Question

I was going through a site I have just completed  and fixing up some accessibility issues   I had a form    lt input type  hidden  name  redirect  value  thank-you php    gt   lt p gt Enter your Email Address to receive our Weekly Newsletter lt  p gt                               lt input name  email  type  text  id  formifemail  size  21    gt   lt input type  image  src  images newsletter button jpg  alt  submit button  border  0  name  Submit  id  Submit  value  Send    gt    This was flagged because their is no  tag to identify the input field for entering the email address  So I changed the  tag to a  tag like so    lt input type  hidden  name  redirect  value  thank-you php    gt   lt label for  formifemail  gt Enter your Email Address to receive our Weekly Research lt  label gt                               lt input name  email  type  text  id  formifemail  size  21    gt   lt input type  image  src  images newsletter button jpg  alt  submit button  border  0  name  Submit  id  Submit  value  Send    gt    and the CSS    formItem label       text-align center      line-height 150       font-size  85em      But the text appears as left justified  and not centered  I ve looked around that there are no obvious bugs  This is happening in both FF 3 x and IE 7 x

User · Accepted Answer

This is because label is an inline element  and is therefore only as big as the text it contains   The possible is to display your label as a block element like this    formItem label       display  block      text-align  center      line-height  150       font-size   85em      However  if you want to use the label on the same line with other elements  you either need to set display  inline-block  and give it an explicit width  which doesn t work on most browsers   or you need to wrap it inside a div and do the alignment in the div

User · Answer

label is an inline element so its width is equal to the width of the text it contains   The browser is actually displaying the label with text-align center but since the label is only as wide as the text you don t notice   The best thing to do is to apply a specific width to the label that is greater than the width of the content - this will give you the results you want

[html] text-align:center won't work with form <label> tag (?)

Examples related to html

Examples related to css