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

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

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.