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 2 of 2
  1. #1
    New Coder
    Join Date
    Feb 2007
    Location
    Albany, Oregon
    Posts
    66
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Centering image vertically and horizontally

    I am trying to get an image to center horizontally (the easy part) and vertically over an entire page. I want the image to be in the exact center no matter the resolution or browser. To do this, I divided the image into four equally sized parts or quadrants and positioned each absolutely. The top left image is 50% from the right and from the bottom, top right is 50% from the left and from the bottom, and so on.

    This method works perfectly in FF, opera, safari, and IE6. IE7 creates a 1px space between all the images because 50% of the page is an even amount, making the exact center 1px beyond the image. All the other browsers add this space to the other side of the image, maintaining the illusion of a single image.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <style type="text/css">
    
    body {
      margin: 0;
      }
    
    img#splash-bottomleft {
      position: absolute;
      right: 50%;
      top: 50%;
      }
    
    img#splash-bottomright {
      left: 50%;
      position: absolute;
      top: 50%;
      }
    
    img#splash-topleft {
      bottom: 50%;
      position: absolute;
      right: 50%;
      }
    
    img#splash-topright {
      bottom: 50%;
      left: 50%;
      position: absolute;
      }
    </style>
    
    </head>
    <body>
    
    <img alt="splash" id="splash-topright" src="images/splash-topright.gif" />
    
    <img alt="splash" id="splash-bottomright" src="images/splash-bottomright.gif" />
    
    <img alt="splash" id="splash-bottomleft" src="images/splash-bottomleft.gif" />
    
    <img alt="splash" id="splash-topleft" src="images/splash-topleft.gif" />
    
    </body>
    </html>

  • #2
    New Coder
    Join Date
    Feb 2007
    Location
    Albany, Oregon
    Posts
    66
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I found a better way to do it if anyone is interested:

    Code:
    div#splash {
      margin: -150px -150px 0 0; /*margins should be half width and height*/
      position: absolute;
      right: 50%;
      top: 50%;
      height: 300px;
      width: 300px;
      }
    Code:
    <div id="splash">
    <img alt="splash" src="images/splash.gif" />
    </div>


  •  

    Posting Permissions

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