'Center'ing a fieldset's legend

Discussion in 'Web Design and Development' started by design-is, Feb 23, 2011.

  1. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #1
    Hi all

    Just want to check something:

    I've tried all CSS methods I can think of to centrally align a legend at the top of a fieldset, but whilst they seem to work on Safari, they fail to make any difference in Firefox.

    So, I've resorted to using <legend align="center">. Just wondered if anyone else had come across this issue and whether they managed to resolve it?

    Thanks

    Doug
     
  2. paulbi, Feb 23, 2011
    Last edited: Feb 23, 2011

    paulbi macrumors newbie

    Joined:
    Aug 4, 2010
    #2
    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?
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    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.
     
  4. design-is thread starter macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #4
    Cheers guys, <legend align="center"> it is :)

    I was just checking to see if there was a way to do it with CSS to keep content and presentation separate —*guess you can't win them all!

    Eternally grateful ;)

    Doug
     

Share This Page