How to align legend to the middle?

Discussion in 'CSS' started by risoknop, Dec 23, 2008.

  1. #1
    Well, what I am trying to do is to align the legend to the middle of the fieldset.

    It works in IE and Opera but not in FF. Any ideas?

    
    legend {
        width: 100%;
        text-align: center;
    }
    
    Code (markup):
     
    risoknop, Dec 23, 2008 IP
  2. risoknop

    risoknop Peon

    Messages:
    914
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Ok there's also problem in IE6 - the legend is 7px to the right... but this I have solved with:

    
    position: relative;
    left: 0 !important;
    left: -7px;
    
    Code (markup):
     
    risoknop, Dec 23, 2008 IP
  3. abcdefGARY

    abcdefGARY Well-Known Member

    Messages:
    665
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    110
    #3
    Can't really see where the problem is without a working demonstration but for the FF problem, I guess you could add...

    legend {
         margin: auto;
    }
    Code (markup):
    ?
     
    abcdefGARY, Dec 23, 2008 IP
  4. risoknop

    risoknop Peon

    Messages:
    914
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Nope I've tried that already. Didn't work.

    Well, for working demonstration, just try to center the legend tag in any random form, for example:

    
    <form method="post" action="">
        <fieldset>
            <legend>I want this to be centered</legend>
            // some random input tags here
        </fieldset>
    </form>
    
    Code (markup):
     
    risoknop, Dec 24, 2008 IP
  5. abcdefGARY

    abcdefGARY Well-Known Member

    Messages:
    665
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    110
    #5
    Oh, I see what the problem is now. I misread/misunderstood the legend tag for the label tag. I don't use the legend tag much nor the fieldset tag much so I don't know much about modifying it with CSS.

    However, I did search around and it looks like a solution is if you add an attribute to the legend tag.

    <legend align="center">Center, goddamnit.</legend>
    Code (markup):
    However, it looks like this won't validate, but if you don't care much for validation: apparently others are very happy with this alternative.
     
    abcdefGARY, Dec 24, 2008 IP