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

center, css, html

Solution

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!

Problem

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.

Original source