Home/ Questions/Q 7867379
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T00:41:57+00:00

<div class=logo> <h1><a href=/><img src=image.png alt=Red Rectangle /></a></h1> </div> .logo h1 img{ position: relative;

  • 0
<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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0