title: Need to center align the image in CSS
body: <p>I am trying to center align (both horizontally and vertically) the image inside a div box in html and css. I am not able to center align it. Here is my below code.</p>
  
  <pre><code>&lt;div style="float:left;margin: 10px" &gt;
      &lt;div style="border:1px solid gray;width: 60px;height: 60px;text-align:center;"&gt;
          &lt;img style="max-height: 60px;max-width: 60px;" 
          src="http://t1.gstatic.com/images?q=tbn:UnPJn535Xfha7M:http://gizmodo.com/assets/resources/2007/07/ipod_6gen_1.jpg"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The image is getting aligned to the top. I tried using vertical-align:middle inside the img tag but it's of no use. </p>