1. Post #1
    Gold Member
    zeroth's Avatar
    August 2006
    169 Posts
    I'm just beginning to learn HTML and CSS, and have gotten a small demo site going (internally). I've been using absolute positioning. this is fine usually, but I would rather have the page auto center the boxes I have in the center of the page, rather then treating the page as one big picture where things can be cut off.

    does anyone know a solution to this?
    Reply With Quote Edit / Delete Reply United States Show Events Bad Spelling Bad Spelling x 1 (list)

  2. Post #2
    I spent $10 on this.
    :awesome:'s Avatar
    April 2009
    5,468 Posts
    If you want to center a div you can use

    Code:
    margin-left: auto;
    margin-right: auto;
    to that div's css

  3. Post #3
    Silverboarder's Avatar
    April 2009
    26 Posts
    to center div's you can use:

    margin: 0 auto;
    Reply With Quote Edit / Delete Reply Netherlands Show Events Agree Agree x 1 (list)

  4. Post #4
    Gold Member
    zeroth's Avatar
    August 2006
    169 Posts
    when I try such thing, the absolute positioning overrides it.

  5. Post #5
    Zayfox's Avatar
    August 2008
    1,246 Posts
    Why would you use absolute positioning as well...?
    Reply With Quote Edit / Delete Reply Australia Show Events Agree Agree x 1 (list)

  6. Post #6
    Gold Member
    zeroth's Avatar
    August 2006
    169 Posts
    I honestly have no idea what else I would use. most likeley because originally I was trying to put text ontop of an image.

    I don't really know, what would be a better solution

  7. Post #7
    Zayfox's Avatar
    August 2008
    1,246 Posts
    I honestly have no idea what else I would use. most likeley because originally I was trying to put text ontop of an image.

    I don't really know, what would be a better solution
    Remove the positioning thing, and just have the
    Code:
    margin: 0px auto;

  8. Post #8
    Gold Member
    zeroth's Avatar
    August 2006
    169 Posts
    then it doesn't position vertically

  9. Post #9
    Sharpshooter's Avatar
    April 2007
    1,230 Posts
    To position it vertically perhaps try.

    Code:
    Margin-top: 50%;
    Margin-bottom: 50%;

  10. Post #10
    Gold Member
    zeroth's Avatar
    August 2006
    169 Posts
    this also doesn't solve the problem that I forgot to mention that I need images to be overlayed on the boxes, aswell as a nav bar

  11. Post #11
    Sharpshooter's Avatar
    April 2007
    1,230 Posts
    this also doesn't solve the problem that I forgot to mention that I need images to be overlayed on the boxes, aswell as a nav bar
    background-image: url(../blah/blah/blah.png)

    You get the idea.

  12. Post #12
    Zayfox's Avatar
    August 2008
    1,246 Posts
    this also doesn't solve the problem that I forgot to mention that I need images to be overlayed on the boxes, aswell as a nav bar
    Code:
    margin: auto auto;
    ?
    I've never needed both, but that might work.
    Just make sure you define a width and height.

  13. Post #13
    turb_'s Avatar
    February 2010
    2,202 Posts
    You can't vertically align stuff very well with CSS.
    Reply With Quote Edit / Delete Reply United Kingdom Show Events Agree Agree x 1Dumb Dumb x 1 (list)

  14. Post #14
    Zayfox's Avatar
    August 2008
    1,246 Posts
    You can't vertically align stuff very well with CSS.
    As I said, I've never actually needed to center something vertically so I was only taking a stab.

  15. Post #15
    Sharpshooter's Avatar
    April 2007
    1,230 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    <body>
    <style>
    #test {background-color:#FF0000; width:500px; height:500px; margin:auto; margin-top: 10%; margin-bottom: 10%;}
    </style>
    <div id="test"></div>
    </body>
    </html>
    Works fine.
    Reply With Quote Edit / Delete Reply United Kingdom Show Events Optimistic Optimistic x 1 (list)

  16. Post #16
    Gold Member
    SataniX's Avatar
    May 2010
    5,635 Posts
    Have an outside div with a css attribute of text-align: center; then the inside ones margin: 0 auto 0 auto.

  17. Post #17
    Gold Member
    Jallen's Avatar
    December 2007
    7,537 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    <body>
    <style>
    #test {background-color:#FF0000; width:500px; height:500px; margin:auto; margin-top: 10%; margin-bottom: 10%;}
    </style>
    <div id="test"></div>
    </body>
    </html>
    Works fine.
    Exactly this.

  18. Post #18
    a2h
    Gold Member

    September 2008
    2,460 Posts
    Have an outside div with a css attribute of text-align: center; then the inside ones margin: 0 auto 0 auto.
    These are all the same:

    Code:
    margin: 0 auto;
    margin: 0 auto 0;
    margin: 0 auto 0 auto;

  19. Post #19
    BBgamer's Avatar
    September 2008
    245 Posts
    Code:
    <body>
        <div id="everything">
            content
        </div>
    </body>
    Code:
    body{
        text-align:center; /* for IE */
    }
    #everything{
        text-align:left;
        margin:0 auto;
        width:960px;
    }
    Edited:

    Also what a2h said.