How to center a (dynamically resizeable) image-map with the imagemapster plug-in

Question

I'm using the JQuery-plugin imagemapster and the code from the authors example at jsfiddle http://jsfiddle.net/jamietre/jQG48 I am able to dynamically resize my imagemap. Now I am trying to center my imagemap horizontally on my page, but I cant get it working. What I have tried so far: adding CSS styles margin-left:auto and margin-right:auto to my image tag.

any help /hint? thanks

Answer 1

Solution 0

I was able to update the imagemapster author's example and obtain the desired result.

CSS

#mapster_wrap_0 {
    margin: 0 auto;
}

Example: http://jsfiddle.net/jQG48/399/.

​mapster_wrap_0 looks auto-generated so there might be a cleaner way to accomplish this centering.

Solution 1

Creating a wrapper div around your map appears to work as well.

<div id="MapWrapper" style="margin:auto; width:75%;">
    <img src="https://github.com/jamietre/ImageMapster/raw/master/examples/images/usa_map_720.png" 
usemap="#usa">
</div>

Example: http://jsfiddle.net/jQG48/400/.