html - How to center the <legend> element - what to use instead of align:center attribute?

Question

What am I missing here?

Edit, because this doesn't work in a comment:

The below solution results in this:

----------------------------------------------------
|                                                  |
|                     Legend text                  |

but what I'm going for is:

----------------------Legend text-------------------
|                                                  |
|                                                  |

Edit #2:

Based on the feedback so far, it is sounding like this whole <legend> tag is a losing proposition. Does anyone have an example of what they use in lieu of this--something that has a similar appearance that is more reliable?

Answer 1

Assuming your markup looks something similar to this:

<form>
<fieldset>
<legend>Person:</legend>
Name: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
</form>

Your CSS should look something like this:

legend {
    margin:0 auto;
}

that's easiest

Oh Dear... You have chosen probably the most difficult thing in CSS when it comes to cross-browser compatibility. Cameron Adams said it best

Probably the only difficulty in styling semantic forms is the legend tag. It is insufferably variable across browsers. In Mozilla, the legend tag is not left-indented from the body of the fieldset, in IE and Opera it is. In Mozilla, the legend tag is positioned in between the fieldset's border and its content, in IE and Opera it is positioned inside the content. This makes it very hard to move the legend inside the fieldset border, or position it flush to the left of the fieldset, as you get varying effects across browsers

You can read more about what he said at Fancy Form Design Using CSS on how to style forms.

My solution to the problem would be to remove the fieldset border completely and absolutely position the legend element. The problem with what you want to do is that it is different in every browser.