Centering across browser

Discussion in 'CSS' started by mnymkr, Jul 24, 2006.

0
  1. #1
    What is the most elegant way to center a div cross browser?
     
    mnymkr, Jul 24, 2006 IP
  2. mdvaldosta

    mdvaldosta Peon

    Messages:
    4,079
    Likes Received:
    362
    Best Answers:
    0
    Trophy Points:
    0
    #2
    umm.... I don;t know what you mean by elegant... but I just use:

    <div align="center">Stuff</div> and it works fine.
     
    mdvaldosta, Jul 24, 2006 IP
  3. AdamSee

    AdamSee Well-Known Member

    Messages:
    422
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    135
    #3
    This is the better way to center it, for use with XHTML:

    body {text-align:center;}/*For IE to center a page*/
    #container {margin:0 auto; text-align:left;}

    <body>
    <div id="container">
    ... Your Code
    </div>
    </body>
     
    AdamSee, Jul 25, 2006 IP
  4. Gordaen

    Gordaen Peon

    Messages:
    277
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #4
    If the div is of a specified width (e.g. set in style, used as inline, etc.), you can set margin-left and margin-right to 0. If it's an exact size, you can do "margin-left: 50%; left: -halfTheDiv'sWidth"
     
    Gordaen, Jul 25, 2006 IP
  5. CraccumDude

    CraccumDude Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I've found the best way to do it that works across most browsers is something like this:

    setting the left and right margins to auto is important.

    
body{
text-align:center;
}

#container{
width:640px;
margin-left:auto;
margin-right:auto;
text-align:left;
}
    Code (markup):
     
    CraccumDude, Jul 26, 2006 IP
  6. AdamSee

    AdamSee Well-Known Member

    Messages:
    422
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    135
    #6
    Margin 0 auto; is the same as:

    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;

    Setting a width is important as well, otherwise it won't give much of a centered effect :)
     
    AdamSee, Jul 26, 2006 IP
  7. esnstudio

    esnstudio Peon

    Messages:
    12
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    As mentioned above by others, margin: 0 auto is needed for firefox, whereas text-align: center is needed for IE.

    Note that you put margin: 0 auto in the actual container which you'd like to center (eg: #content) whereas text-align: center should be put in the outer div of the actual container (eg: body or #wrapper)
     
    esnstudio, Jul 28, 2006 IP
  8. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #8
    IE6 supports {margin: auto;} when in standards mode. Use a complete and proper DTD to trigger standards mode. Only IE5.x and IE6 in quirks mode require the hacky work-around. IE5 is not worth supporting, and there is no sane reason to run IE6 in quirks mode.

    cheers,

    gary
     
    kk5st, Jul 28, 2006 IP
  9. CraccumDude

    CraccumDude Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    we still get enough people with IE 5.* coming through to make it worth supporting.
     
    CraccumDude, Jul 29, 2006 IP
  10. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #10
    It is my experience, and that will vary with coding style I suppose, that the worst that happens to IE5.x is a little bending, but no breakage. In this post's case, IE5 is not centered in the viewport. So what? Unless the client insists on hackery for IE5, and is willing to pay for it, and understands the potential for more bugs, and knows that supporting yet another obsolete browser will increase maintenance costs, I don't do it.

    The usual case is that once the extra and ongoing costs of IE5 support are explained, and once the client sees what a piddling difference the extra cost makes, that support requirement is quietly dropped.

    cheers,

    gary
     
    kk5st, Jul 29, 2006 IP