Centrer l'image verticalement et horizontalement à l'intérieur de la DIV avec float:left?

J'ai besoin d'une solution de travail pour faire un trival tâche de centrage des images avec des dimensions différentes, pour un carré div lorsque float:left est utilisé pour placer des images dans les lignes.J'utilise des div à l'intérieur de la div de faire le tour :

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

MAIS je dois utiliser des float: left pour l'extérieur de l'élément à mettre des images en lignes et quand je fais les images ne sont pas centré verticalement (ils sont alignés sur la bordure du haut de la div), j'ai essayé quelques autres code CSS mais float:left fait toujours les images ne sont pas centrés verticalement.

  • S'il vous plaît poster une démo en live, dans le JS Fiddle, JS Bin, ou semblable à montrer ce que vous travaillez avec et montrer ce qui ne va pas.
  • Flotteur ne s'applique pas aux cellules d'un tableau.
  • doit mettre la démo en jsfiddle.net
InformationsquelleAutor Rorkkkk | 2012-05-30
  1. 15

    Supprimer float:left; de votre .outer-element comme il est en conflit avec la façon dont la table-cell affiche le contenu. Si vous avez besoin de faire flotter le récipient de gauche, placez le .outer-element dans un autre récipient qui flotte à gauche.

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

    Exemple:
    http://jsfiddle.net/xQEBH/17/

    Espérons que cette aide!

    • rebz il fonctionne comme un charme ! merci
    • Cela m'a aidé! Merci @rebz
    InformationsquelleAutor rebz
  2. 0

    essayez comme ceci 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;
}
    InformationsquelleAutor CSS Guy
  3. 0

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

    Il suffit d'ajouter le suivant que vous voulez que vos éléments à flottait à gauche...

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

    Espère que cela aide....

    InformationsquelleAutor Bhojendra Rauniyar