Having Trouble placing my image.

[SumanSriparna]

I'm having trouble placing this image in center, tried using margins, but its not working.
Please help setting my image in centre.

<div id="top" style="margin:0 auto;  width:900px; height:70px; alignment-adjust:central;"><img src="crop.jpg" width="900" 
height="70" style=" margin:0 auto;" /></div> 
<div id="below" style="height:50px; width:900px; background-color:#0FF; margin:0px auto;"><h4 style="text-align:center; margin:0 auto;">Produced and Introduced by</h4>
<h2 style="text-align:center;margin:0 auto">Kiruba Realty Ltd</h2></div>

<table width="1000" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td style="margin:0 auto;"><span class="map" style="padding: 0px; background: transparent url(calvaryhotspot2.jpg) repeat scroll 0%; display: block; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; position: relative; 
width: 450px; height:950px; margin:0 auto;">
		<img src="calvaryhotspot2.jpg" alt="" width="403" 

height="909" usemap="#usa" class="map maphilighted" style="border: 0px none ; padding: 0px; opacity: 0; position: absolute; left: 0px; top: 0px;"></span>
      <map name="usa">
        
        
        
        <area shape="rect" coords="50,760,201,860" href="#?w=900" rel="popup1" class="poplight">
        <area shape="rect" coords="202,758,346,862" href="#?w=900" rel="popup2" class="poplight">
        <area shape="rect" coords="52,661,200,758" href="#?w=900" rel="popup1" class="poplight">
        <area shape="rect" coords="200,658,348,758" href="#?w=900" rel="popup1" class="poplight">
        <area shape="rect" coords="48,561,197,658" href="#?w=900" rel="popup1" class="poplight">
        <area shape="rect" coords="199,562,349,657" href="#?w=900" rel="popup1" class="poplight">
        <area shape="rect" coords="50,465,199,559" href="#?w=900" rel="popup1" class="poplight">
        <area shape="rect" coords="200,463,347,560" href="#?w=900" rel="popup1" class="poplight">
        <area shape="rect" coords="51,374,200,463" href="#?w=900" rel="popup1" class="poplight">
        <area shape="rect" coords="201,371,348,463" href="#?w=900" rel="popup1" class="poplight">
        <area shape="rect" coords="50,280,199,371" href="#?w=900" rel="popup1" class="poplight">
        <area shape="rect" coords="200,280,344,370" href="#?w=900" rel="popup1" class="poplight">
        <area shape="rect" coords="48,187,199,278" href="#?w=900" rel="popup1" class="poplight">
        <area shape="rect" coords="201,182,347,279" href="#?w=900" rel="popup1" class="poplight">
        <area shape="poly" coords="197,91,199,185,52,188,49,125,59,108,72,101,84,93" href="#?w=900" rel="popup1" class="poplight" />
        <area shape="poly" coords="200,183,347,185,347,107,340,97,331,91,200,92" href="#?w=900" rel="popup1" class="poplight" />
    </map></td>
  </tr>
</table>




<!--POPUP START-->

<div id="popup2" class="popup_block">
	<p><a href="http://www.designbombs.com/"></a></p>
	<table width="865" border="0" cellspacing="0" cellpadding="0">
	  <tr>
	    <td><img src="2.jpg" width="864" height="335" alt="Scene1" /></td>
      </tr>
	  <tr>
	    <td><h2>Popup #2</h2>
        <p>Aliquip
	      transverbero loquor esse ille vulputate exerci veniam fatua eros
	      similis illum valde. Praesent, venio conventio rusticus antehabeo
	      lenis. Melior pertineo feugait, praesent hos rusticus et haero
	      facilisis abluo. </p>
        <p>Veniam tincidunt augue abluo vero, augue nisl melior quidem secundum nobis singularis eum eum.</p>
        
        <div id="button" style="height:20px; width:50px; margin:auto;">
        	<a href="#" style="color:#000;height:20px; width:50px; margin:auto; background-color:#9C0; padding:10px; border:1px solid #333;">Booking</a>
        </div></td>
      </tr>
  </table>
  </div>
  
  <div id="popup1" class="popup_block">
	<p><a href="http://www.designbombs.com/"></a></p>
	<table width="865" border="0" cellspacing="0" cellpadding="0">
	  <tr>
	    <td><img src="25408_112291338801592_2849154_n.jpg" width="600" height="300" alt="Scene1" style=" margin-left:170px;;" /></td>
      </tr>
	  <tr>
	    <td><h2>Popup #2</h2>
        <p>Aliquip
	      transverbero loquor esse ille vulputate exerci veniam fatua eros
	      similis illum valde. Praesent, venio conventio rusticus antehabeo
	      lenis. Melior pertineo feugait, praesent hos rusticus et haero
	      facilisis abluo. </p>
        <p>Veniam tincidunt augue abluo vero, augue nisl melior quidem secundum nobis singularis eum eum.</p>
        <div id="button" style="height:20px; width:50px; margin:auto;">
        	<a href="#" style="color:#000;height:20px; width:50px; margin:auto; background-color:#9C0; padding:10px; border:1px solid #333;">Booking</a>
        </div>
        </td>
      	</tr>
  	</table>

    
	</div>

Please Help, urgently needed.

[sunfighter]

You fail to tell us what image your having trouble with. I'm guessing it's the images in the pop up's. These images are in a table and the table is in a div. Unless you give a div a width it will take the width of it's parent, in this case the whole page. So using margin:auto; on the tables will center them.

This may bring up a problem with the <p><a href="http://www.designbombs.com/"></a></p> centering when you place text or an image in there, but you should be able to handle that.

I suggest you learn or use a style css section instead of inline. Would make things easier.