'Center'ing a fieldset's legend

Try this...

If you really want to use CSS then use this...

Code:

<style type="text/css">
fieldset 
{
	width:200px;
}
legend
{
	margin-left:65px;;
	width:70px;
	text-align:center;
}
</style>
<fieldset>
    <legend>some text</legend>
    <div>
    Some text
    </div>
</fieldset> 

the only down side I can see to this approach is that you must know/set the width of the fieldset element. Knowing it allows you to set accurately the left margin (minus half the width of the legend).

I tried it with a setting of margin-left:50% to the legend element (which worked) and then position:relative & left: minus the width of the legend which didn't work.

It seems to be that "positioning" doesn't work with the legend element (never tried until now). oh well.

Hope this helps!?

Cheers,
Paul


Edited to add: <legend align="center"> seems to work very well, so why not just use that?

 

I remember finding that the legend tag is very hard to do extensive styling on, and get cross-browser compatibility. I ended up giving up on whatever fanciness that I had been trying. The browsers simply implemented the specifics of how styles effect the legend tag very differently. It's one case where I find it OK to go slightly off semantic HTML if you really want a specific look.