title: Image not aligning to center in a left aligned div
body: <p>Below is my code :</p>
  
  <pre><code>&lt;div id="footer"&gt;
  &lt;div id="left_footer"&gt;
  &lt;div id="img_left" align="center"&gt;
  &lt;img src="separator_bar.jpg" align="middle"/&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="right_footer"&gt;
  &lt;div id="img_right" align="center"&gt;
  &lt;img src="separator_bar.jpg" align="middle"/&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#footer {
      width:500px;
      position:relative
  }
  #left_footer{
      float:left;
  }
  #right_footer{
      float:right;
  }
  </code></pre>
  
  <p>I am trying this code but my image is not aligned to center its always aligned to  left in left footer and to right in right footer. Please suggest !</p>