Comment aligner verticalement une image dans une div avec une hauteur dynamique?

Ce que nous avons est un div qui contient l'image que l'utilisateur télécharge. C'est le code:

HTML:

<div class="container_img">
    <img height="120" width="150" src="[image name].jpg">
</div>

CSS:

div.container_img {
    overflow: hidden;
    width: 150px;
    height: 150px;
}

Notre problème est que si l'image que l'utilisateur télécharge a une hauteur plus petite que 150px, il y a un grand espace en bas. Nous voulons donc alignées à la verticale de l'image, de sorte qu'il ne ressemble pas à elle flotte.

J'ai essayé de chercher des solutions sur le net mais je ne peux pas en trouver un qui fonctionne avec des images dynamiques à l'intérieur d'un DIV. Certaines solutions nécessitent que vous connaissez les dimensions de l'image.

Personne n'a eu ce problème et l'a résolu?

source d'informationauteur catandmouse

  1. 10

    Vous avez besoin d'utiliser JavaScript/jQuery pour détecter la hauteur de l'image. CSS n'est pas un langage dynamique et vous ne pouvez pas détecter la hauteur à l'aide d'pur css. À l'aide de jQuery, vous pouvez faire

    jQuery

    var $img = $('div.container_img img');
var h = $img.height();
$img.css('margin-top', + h / -2 + "px"); //margin-top should be negative half of image height. This will center the image vertically when combined with position:absolute and top:50%.

    CSS

    div.container_img {
    position:relative; 
    width: 150px;
    height: 300px;
}

div.container_img img{
    position:absolute;
    top:50%;
}

    Vérifier exemple de travail à http://jsfiddle.net/nQ4uu/2/

  2. 1
    div.container_img {
    display: table-cell;
    vertical-align: middle;
    /* other attributes */
}

    fonctionne, mais je ne sais pas si ça le fait sur toutes les versions IE.

  3. 0

    Je pense que vous ne serez pas en mesure d'aligner l'image à la verticale à l'aide de tout droit vers l'avant de la technique. Vous pouvez voir cette pour aligner l'image à l'horizontale...

  4. 0

    il n'est pas facile, consultez cette page http://www.vdotmedia.com/demo/css-vertically-center.html

  5. 0

    Vous pouvez atteindre cet objectif à l'aide de flex dans le css:

    div.container_img {
    position:flex; 
     width: 150px;
    height: 150px;
    justify-content: center;
}

div.container_img img{
  margin-top: auto;
  margin-bottom: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
  6. -2

    Je sais que c'est une vieille question, mais je pense qu'il y a i s meilleure réponse avec CSS seul

    DÉMO jsFiddle

    HTML 

     <div id="centered"></div>

    CSS

    #centered {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: 100px;
    width: 300px;
    margin: auto;
    background-color: grey;
}

    Que c'est!