Grow your CSS skills. Land your dream job.

The Infamous Image Centering Issue

  • # June 1, 2009 at 9:56 am

    I would like to center my logo in the exact center of the screen. I kind of got it working with this code, but it still looks off center (slightly.) The image is W:273px x H:205px

    How do I actually get it centered? I am currently using the following code. The logo sits inside of the container.

    CSS

    Code:
    #container {
    text-align: center;
    }

    #logo {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -136.5px;
    margin-left: -102.5px;
    }

    HTML

    Code:
    # June 1, 2009 at 10:38 am

    Oops! I got it. I accidentally mixed up the margin-top and margin-left #logo parameters. Not to mention, the smallest pixel denomination is 1px. There is no .5px

    WRONG WAY
    #logo {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -136.5px;
    margin-left: -102.5px;
    }

    RIGHT WAY
    #logo {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -103px;
    margin-left: -137px;
    }

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".