Изображение центра вертикально и горизонтально внутри DIV с поплавком: слева?

Question

мне нужно рабочее решение сделать Trival задачу центровки изображения с разными размерами, на квадратный DIV, когда поплавок: слева используется для размещения изображений в rows.I использования DIV внутри DIV, чтобы сделать трюк:

.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 Я должен использовать float use: left для внешнего элемента, чтобы помещать изображения в строки, и когда я делаю изображения не центрированными по вертикали (они выровнены по верхней границе div), я пробовал некоторые другие коды CSS, но float: left всегда делает изображения не вертикально центрированными.

Answer 1

Удалить float:left; из вашего .outer-element как это противоречит как содержимое таблицы в ячейке отображается. Если вам нужно поместить контейнер влево, поместите .outer-element в другой контейнер, который плавает влево.

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/

Надеется, что это помогает!

Answer 2

попробовать, как этот 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

Ваш 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; 
} 

Просто добавьте следующее, что вы хотите, чтобы ваши элементы будут размещены слева ...

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

Надеется, что это помогает ....