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

user_65025 0
Viewed 224810

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

css html
2 Answers

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.

Can_Berk_G252der_21190

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.

Andrew_Hare_342110
Related