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:

<input type="hidden" name="redirect" value="thank-you.php" /> <p>Enter your Email Address to receive our Weekly Newsletter</p>                             <input name="email" type="text" id="formifemail" size="21" /> <input type="image" src="images/newsletter_button.jpg" alt="submit button" border="0" name="Submit" id="Submit" value="Send" /> 

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:

<input type="hidden" name="redirect" value="thank-you.php" /> <label for="formifemail">Enter your Email Address to receive our Weekly Research</label>                             <input name="email" type="text" id="formifemail" size="21" /> <input type="image" src="images/newsletter_button.jpg" alt="submit button" border="0" name="Submit" id="Submit" value="Send" /> 

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

Answer 1

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.