Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    877
    Thanks
    53
    Thanked 6 Times in 5 Posts

    centering a div in css

    I have this div:

    Code:
    <div align="center" id='slowScreenSplash' style='position:absolute;z-index:1;top:220px;left:98px'>
    <img border="0" id="mainImage1" src="blueani2c.gif" width="1040" height="450">
    </div>
    The position from the top is perfect - and easily positioned as above.

    But how do I change that "left:98px" such that it always centres on the screen?

    I know there are centering routines, but how does CSS alter itself accordingly?
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,708
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there tpeck,

    try it like this...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    #slowScreenSplash {
        margin-top:220px;
     }
    #slowScreenSplash img {
        display:block;
        width:1040px;
        height:450px;
        margin:auto;
     }
    </style>
    
    </head>
    <body>
    
    <div id="slowScreenSplash">
     <img src="blueani2c.gif" alt="">
    </div>
    
    </body>
    </html>
    
    coothead

  • #3
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    Code:
    left:50%;
    margin-left:-520px;
    or (in the general case)
    Code:
    left:50%;
    margin-left:-{Width/2}px;
    I am still learning English

  • #4
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    877
    Thanks
    53
    Thanked 6 Times in 5 Posts
    Both ways work, but I want to use position:absolute, so I'm using the second.

    Thanks!
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,708
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there tpeck,

    there is one problem with the position:absolute method, of which you may not be aware.
    If the page width is reduced there will come a point when the image will start to disappear to the left.

    coothead

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    I didn't look at the code, but margin: 0 auto; would be the better way

    http://www.w3schools.com/css/css_margin.asp

    from w3schools:
    auto The browser sets the margin.

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,703
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Quote Originally Posted by Sammy12 View Post
    I didn't look at the code, but margin: 0 auto; would be the better way
    Not with absolute positioning.
    tpeck, if you want to center an absolutely positioned element you need to position it 50% left or right and then apply a negative margin of half its width in the opposite direction. This requires the element to have a specific width, though.

    Code:
    element {
      width: 200px;
      position: absolute;
      left: 50%;
      margin-left: -100px; /* half the width of the element */
    }
    /* alternative */
    element {
      width: 200px;
      position: absolute;
      right: 50%;
      margin-right: -100px;
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •