center align image map in widget
-
Hello,
I am trying to center align an image map in a widget area on the home page of my website. I’ve tried:
1) <div align=”center”>
2) <center>
3) <p align=”center”>
4) align=”center” in the image tag
5) aligncenter in the image tag
None of these has worked. The site is located at: http://www.sedulousmarketing.com. The current code in the widget is:<p align=right><img src=”http://sedulousmarketing.com/wp-content/themes/dynamik/css/images/front-page-buttons.png” alt=”Sedulous Marketing Resources” usemap=”#map” />
<map name=”map”>
<area shape=”rect” coords=”1367, 2, 1999, 284″ href=”http://sedulousmarketing.com/2-common-marketing-mistakes/” alt=” 2 Common Marketing Mistakes” />
<area shape=”rect” coords=”688, 4, 1361, 287″ href=”http://sedulousmarketing.com/free-marketing-resources/” alt=”Free Marketing Resources” />
<area shape=”rect” coords=”8, -1, 683, 284″ href=”http://sedulousmarketing.com/the-power-marketing-program/” alt=”The Power Marketing Program” />
</map></p>Your help is greatly appreciated!
-
These are the general techniques of centering things http://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=”http://sedulousmarketing.com/wp-content/themes/dynamik/css/images/front-page-buttons.png” alt=”Sedulous Marketing Resources” usemap=”#map” />
<map name=”map”>
<area shape=”rect” coords=”1367, 2, 1999, 284″ href=”http://sedulousmarketing.com/2-common-marketing-mistakes/” alt=” 2 Common Marketing Mistakes” />
<area shape=”rect” coords=”688, 4, 1361, 287″ href=”http://sedulousmarketing.com/free-marketing-resources/” alt=”Free Marketing Resources” />
<area shape=”rect” coords=”8, -1, 683, 284″ href=”http://sedulousmarketing.com/the-power-marketing-program/” 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)
The topic ‘center align image map in widget’ is closed to new replies.