Centrare l'immagine verticalmente e orizzontalmente all'interno di DIV con float: a sinistra?

Question

Ho bisogno di una soluzione di lavoro per eseguire un'operazione banale di centraggio immagini di diverse dimensioni, ad un div piazza quando float: sinistra serve per posizionare le immagini in uso rows.I div all'interno di div fare il trucco:

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

MA DEVO usare float di uso: a sinistra per elemento esterno per mettere le immagini in righe e quando faccio le immagini non sono centrate verticalmente (sono allineati al bordo superiore del div) Ho provato altri codici CSS ma float: left rende sempre le immagini non centrate verticalmente.

Answer 1

Rimuovere float:left; dal .outer-element in quanto in conflitto con come il contenuto viene visualizzato table-cell. Se è necessario spostare il contenitore a sinistra, posizionare lo .outer-element all'interno di un altro contenitore che galleggia a sinistra.

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/

Spero che questo aiuti!

Answer 2

provare come questo 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

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

Basta aggiungere il seguente che volete che i vostri elementi da galleggiare sinistra ...

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

Spero che questo aiuti ....