CODEWITHSUNDEEP
htmlcssxhtml
Kid Diamond
Kid Diamond

Reputation: 2301

Image doesn't center in IE7?

<div class="logo">
    <h1><a href="/"><img src="image.png" alt="Red Rectangle" /></a></h1>
</div>

.logo h1 img{
    position: relative;
    width: 256px;
    left: 50%;
    margin-left: -128px;
    border: none;
}

With the code above I am centering an image to the middle. But this only works for FireFox, Chrome, because in Internet Explorer 7 it looks like the image is not centered but like 30 pixels to the right from the center.

Screenshot of the not completely centered image (red) in IE7 Screenshot

Does anybody knows how I can make this work properly in IE7?

EDIT: I don't want to use margin: 0 auto; because that makes the area around the image (when it's centered) also clickable as a link. I want only the image be clickable as a link.

Upvotes: 2

Views: 1050

Answers (2)

Nathan
Nathan

Reputation: 12010

Maybe margin: 0 auto; would work better for you? It depends on if you are positioning this on the page or you just want it centered. You can use this if you know the width of the element:

.logo h1 img {
    width: 256px;
    margin: 0 auto;
    border: none;
}

This will center it because the margin on left and right is auto and the width is set.

jsFiddle: http://jsfiddle.net/thFpF/

Edit

You should instead center a parent element with margin: 0 auto; then and put the image and anchor (<a> link) inside it. This way the whole area will not be clickable.

Upvotes: 2

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

If you know the width of the image, it's better to use:

.logo h1 img {
   width:128px;
   margin-left:auto;
   margin-right:auto;
}

Upvotes: 1

Related Questions