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.