Java Script Problem - Centering an Image

Question

I have an image viewer using a js module called "cloud zoom."

It works wonderfully and seems to be just what I need. Except! It messes up the viewer when I try and center the IMG in a div.

Here is my unfortunate example. Roll over the image and you will see that the mouse and the view don't match up. It works fine if I were to remove the auto margin style on the IMG. I just need that image in the middle of the div.

http://forumgallery.rollinleonard.com/test2.php

Please help!

Answer 1

1. Remove the auto margin from the IMG
2. Add the auto margin to the A tag enclosing the IMG
3. Set the A tag to display: inline-block

Answer 2

Something like this seems to work okay in IE8/Chrome.

<div style="display:inline-block; margin: 0 auto 0 auto"> 
     <a href='/big.jpg' class='cloud-zoom' id='zoom1' rel=""><img src="/small.jpg" alt='' title="Optional title display" /></a> 
    </div>