Center image vertically and horizontally inside of DIV with float:left?

Question

I need a working solution to do a trival task of centering images with different dimensions, to a square div when float:left is used to place images in rows.I use div inside of div to do the trick :

 .outer-element{ //wrap tile div
     display:table-cell;
     width:300px;height:300px;
     text-align:center ;
     vertical-align:middle ;
     float:left;
     margin-bottom:15px;
 }
 .inner-element{ //div with image inside
     display:inline-block;
 }

BUT I must use use float: left for outer-element to put images into rows and when I do images are not centered vertically (they are aligned to top border of the div) I tried some other CSS codes but float:left always makes images not vertically centered.

Answer 1

Remove float:left; from your .outer-element as it conflicts with how the table-cell displays content. If you need to float the container left, place the .outer-element within another container that floats left.

HTML

<div class="fl">
    <div class="outer-element">
        <div class="inner-element">
            <img src="http://thecybershadow.net/misc/stackoverflow.png" />
        </div>
    </div>
</div>

CSS

.fl {float:left;}
.outer-element{
    display:table-cell;
    width:300px;
    height:300px;
    vertical-align:middle;
    background:#666;
    text-align:center;
    margin-bottom:15px;
}
.inner-element{
    display:inline-block;
}

Exmaple: http://jsfiddle.net/xQEBH/17/

Hope this helps!