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!

Answer 2

try like this http://jsfiddle.net/aEfwC/

<div align="center">
    <div class="outer-element">
    <div class="image"></div>
</div>   
</div>


.outer-element
{
     width:300px;height:300px;
     float:left;
     background-color:#2a2a2a;
    position:relative;
 }
.image
{
width:128px;
height:128px;
background:url(http://thecybershadow.net/misc/stackoverflow.png);
vertical-align:middle; 
background-repeat:no-repeat;
}

Answer 3

Your Css...

.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;
 }

Just add the following that you want your elements to be floated left...

.outer-element:before{content: "."; height: 0; overflow: hidden; visibility: hidden; float: left;}

Hope this helps....