I think this is a bit tricky because of the jquery involved. But if anyone could please advise how to get this image centered I would really appreciate it.
I also would like to place small images of arrows to the left and right of the image itself to link to the next page of the catalog, so please keep that in mind when suggesting a solution.
Print - Municipal Resident Directory and Map
Thanks so much!
actually had to take it out of the main-content div, and it works now! Thanks for your help
Try to put leftarrow and rightarrow div outside zoom div, and add float:left to zoom div.
Hmm no luck… check the link when you get a moment.
Thanks ahead of time
You will need to add 2 more divs for images of arrows to the left and right. So in main-content div you will have left div for arrow that points back, middle div with picture, and right div for arrow that points forward.
Your main-content div is - width: 752px; margin: 20px auto; padding: 20px;
.small img is width: 600px;
That means that you have 752-40-600=112px for 2 divs with arrow images.
Add float:left to div with arrow image on the left, and to middle div which is class=“zoom” .
Position arrow images with padding (top, left, right, bottom).
I think jquery will be ok. If not try to re-position it by changing top and left attributes in .az-zoom class.