title: Why cant center an image inside a 'div' with 'float' right or left?
body: <p>I have enclosed an image inside a nested div <code>.box</code>. If it is not floated the image can be exactly centered to the <code>.box</code>, but when I <code>float</code> it <code>left</code> or <code>right</code> the center alignment goes away! I have 4 images with various sizes that need te be centered inside their own <code>.box</code>. How can I fix it?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;div class="con"&gt;
     &lt;div class="box"&gt;
        &lt;img src="../_images/icon-test.png"&gt;  
      &lt;/div&gt;  
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.con {
      width:300px;
      height:200px;
      background: #996600;
  }
  
  .box {
      position:relative;
      width:150px;
      height:150px;
      background-color: #333333;
      display:table-cell;
      text-align:center;
      vertical-align:middle;
      float:right;
  }
  </code></pre>