中心图像垂直和水平在DIV内有float：left？ [英] Center image vertically and horizontally inside of DIV with float:left?

问题描述

我需要一个工作的解决方案做一个trival任务，以不同的维度的图像为中心，到一个正方形div当float：left用于放置图像在rows.我使用div里面的div做诀窍：

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

但是我必须使用float：left作为外元素行，当我做的图像不垂直居中（它们对齐到div的顶部边框）我尝试一些其他CSS代码，但 float：left 总是使图像不垂直居中。

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.

推荐答案

从 .outer-element中删除 float：left; ，因为它与表单元格显示内容的方式相冲突。如果需要将剩余的容器浮动，将 .outer-element 放在另一个浮动的容器中。

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

Exblele：
http://jsfiddle.net/xQEBH/17/

希望这有助于！

这篇关于中心图像垂直和水平在DIV内有float：left？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！