center align image map in widget

These are the general techniques of centering things https://www.w3.org/Style/Examples/007/center.en.html

Hi Andrew. I did try the only code on that page for images. So, I added this to my CSS:
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }

and now my widget code reads this:
<img class=”displayed” src=”https://sedulousmarketing.com/wp-content/themes/dynamik/css/images/front-page-buttons.png&#8221; alt=”Sedulous Marketing Resources” usemap=”#map” />
<map name=”map”>
<area shape=”rect” coords=”1367, 2, 1999, 284″ href=”https://sedulousmarketing.com/2-common-marketing-mistakes/&#8221; alt=” 2 Common Marketing Mistakes” />
<area shape=”rect” coords=”688, 4, 1361, 287″ href=”https://sedulousmarketing.com/free-marketing-resources/&#8221; alt=”Free Marketing Resources” />
<area shape=”rect” coords=”8, -1, 683, 284″ href=”https://sedulousmarketing.com/the-power-marketing-program/&#8221; alt=”The Power Marketing Program” />
</map>

I believe that is how it is supposed to be done. Am I right?

Thanks!

There are many <div>s wrapping your image that are barriers to centering it, who set up that theme; what theme are you using?

Btw if you want to use ‘margin: 0 auto’ you need to specify a width. See the linked resource above.

#ez-feature-top-1 {
width: 80%;
}

Above is what is forcing the resize.

Using your image I created this simple HTML page, review the source code for CSS, the image is centered, the right size for use with the map.

Also look into CSS Sprites instead of use maps (which are deprecated)