Centering image at all times

Question

I have an image, which i'm using as a logo.

I want this to be centered at all times (regardless of window size).

I haven't been able to do this with auto margins.

The image has to go over the bottom of my nav, which is placed above the logo.

HTML:

<div id="logo">

<img src="images/logorz.png" alt="logo" width="180px" />
</div>

CSS:

#logo {
    position: absolute;
    margin-left:41%;
    margin-top:-7%;


}

NAV HTML:

<div id="nav">

<ul>
    <li><img src="images/kranznav.png" alt="kranz" /><a href="index.php">COMPETE</a></li>
    <li><img src="images/thumbnav.png" alt="thumb" /><a href="index.php">SCORE</a></li>
    <li><img src="images/bagnav.png" alt="bag" /><a href="index.php">SHOP</a></li>
    <li><img src="images/morenav.png" alt="more" /><a href="index.php">MORE</a></li>
</ul>
</div>
<div class="clear">
</div>

NAV CSS:

#nav {
    background:#ffffff;
    width:100%;
    margin-top:-2em;

}


#nav ul {
    list-style-type:none;
}

#nav li {
    display:inline;
    float:left;
    width:20%;
    margin-left:2%;
    margin-right:2%;
    margin-top:5%;
    text-align:center;
}



#nav a {
    display:block;
    margin-right:0% auto;
    padding-left:0% auto;
    color:#5E09CB;
    text-decoration:none;

}

Answer 1

There is no need to use javascript for this.

You can do it this way:

#logo {
    position: absolute;
    left:50%;
    margin-left:-50px;
    width:100px;


}

Note, that the element needs to have a width, and the negative left margin is half the width.

http://jsbin.com/ukexox/1/edit

Answer 2

if your logo is width: 180px; and you want to center it at all times. You can do it like this.

position: absolute;
left: 50%;
margin-left: -90px;

Answer 3

If you need the image to be on top of the nav, then try using z-index property...

something like this...

css {

z-index:2;

}

use z-index to position one element over the other... make sure you give the z-index of the other element lesser than this...

This might work...

Answer 4

You need to have a wrapper which wraps both nav and image. The image tag need not be surrounded with the unnecessary div. Then, you can style the image as

image {
    position:relative;
    widhth: image_size_here px;
    margin: auto;
    display:block;

}

Here is a jsfiddle I saved for your reference... http://jsfiddle.net/vASmC/

Answer 5

#logo {
    position: relative;
    margin:0 auto;
    width:180px;
}

auto sets the left and right margin automatically, so the #logo is always centered within the page... some browsers need position:relative to get this work...