CODEWITHSUNDEEP
javascriptcss
Rollin
Rollin

Reputation: 131

Java Script Problem - Centering an Image

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!

Upvotes: 2

Views: 134

Answers (2)

WSkid
WSkid

Reputation: 2786

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>

Upvotes: 2

babtek
babtek

Reputation: 944

  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

Upvotes: 2

Related Questions