Bild vertikal und horizontal innerhalb von DIV mit Float zentrieren: links?

Question

Ich brauche eine funktionierende Lösung eine triviale Aufgabe, Zentrieren Bilder mit unterschiedlichen Abmessungen, zu einem Quadrat div zu tun, wenn float: left innerhalb von div Bilder in rows.I Verwendung div zu platzieren, um den Trick verwendet:

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

ABER ich muss verwenden float: links für äußere-Element, um Bilder in Zeilen und wenn ich tun Bilder sind nicht zentriert vertikal (sie sind nach oben Grenze der Div ausgerichtet) Ich habe versucht, einige andere CSS-Codes aber float: links macht immer Bilder nicht vertikal zentriert.

Answer 1

entfernen float:left; von Ihrem .outer-element wie es in Konflikt mit, wie der Tabellenzelle zeigt den Inhalt. Wenn Sie den Container nach links schweben lassen müssen, platzieren Sie die .outer-element in einem anderen Container, der nach links schwebt.

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/

hoffe, das hilft!

Answer 2

versuchen, wie diese 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

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

Fügen Sie einfach die folgende, dass Sie Ihre Elemente wollen links schwebte werden ...

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

this helps ....