Question

I put ‘a’ tag in my html and add position relative to it then append ‘img’ tag in ‘a’ tag and add absolute position, left 0, right 0, top 0, bottom 0, margin auto to ‘img’ tag.

this code not working in ie7. In other browser it works fine.

whats wrong in my code?

I create code as follow:

HTML:

<a href="#" class="img-link-wrap"><img alt="Image 1" src="img/501.jpg"></a>

CSS:

a.img-link-wrap {
border: 1px solid #999;
display: block;
position: relative;
height: 11em;
width: 10em;
text-align: center;
}

a.img-link-wrap img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}

Thanking You.

Answer 1

to center an element, use this code snippet:

.centered {
  position: based on your choice;
  top: 50%;
  left: 50%;
  margin-top: -(element_height/2);
  margin-left: -(element_width/2);
}