Using CSS transitions for images - can't center middle DIV

Question

On this site: http://iledan.me/test.html

I am trying to use CSS transitions to create a hover effect on these three images, each which is in their own div, and all three divs in a container. The left and right icons are floating left and right respectively, and the middle one is set to margin auto on each side. How do I get the middle icon to function as the other icons do?

EDIT: The middle icon is displaying the hover image and the original-state image side by side rather than one sitting on top of the other. I am asking how to get them to sit on top of each other, because I am using opacity with CSS transitions for the hover effect.

Answer 1

html - Align image in center and middle within div

.img  
    { width:500px;
      height:250px;
      border:4px solid pink;
      display:table-cell;
      text-align:center;
      vertical-align:middle;
     }


  <div class="box"> 
       <img src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash2/377327_347562611999364_262535563_n.jpg" width="400" height="140" />
  </div>

Answer 2

You were missing:

#facebook img { position: absolute; }