aligner verticalement l'image en div

Question

j'ai un problème avec l'image vertical-align in div

 .img_thumb {
    float: left;
    height: 120px;
    margin-bottom: 5px;
    margin-left: 9px;
    position: relative;
    width: 147px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
}

.img_thumb img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
}

<div class="img_thumb">
    <a class="images_class" href="large.jpg" rel="images"><img src="small.jpg" title="img_title" alt="img_alt" /></a>
</div>
 

Pour autant que je sache, j'ai besoin de "display: block;" pour positionner l'image au centre et cela fonctionne. Aussi, dans les tutoriels, je trouve beaucoup de réponses mais elles ne sont pas "utiles", car toutes mes images ne sont PAS à la même hauteur!

Answer 1

Si vous avez une hauteur fixe dans votre conteneur, vous pouvez définir la ligne de hauteur à la même hauteur, et il va centrer verticalement. Puis il suffit d'ajouter le texte-align pour centrer horizontalement.

Voici un exemple: http://jsfiddle.net/Cthulhu/QHEnL/1/

MODIFIER

Votre code devrait ressembler à ceci:

.img_thumb {
    float: left;
    height: 120px;
    margin-bottom: 5px;
    margin-left: 9px;
    position: relative;
    width: 147px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    line-height:120px;
    text-align:center;
}

.img_thumb img {
    vertical-align: middle;
}

Les images seront toujours centré horizontalement et verticalement, quelle que soit leur taille. Voici 2 exemples de plus avec des images de dimensions différentes:

http://jsfiddle.net/Cthulhu/QHEnL/6/

http://jsfiddle.net/Cthulhu/QHEnL/7/

Answer 2

vous n'avez pas besoin de définir le positionnement lorsque vous avez besoin d'un centre d'alignement vertical pour les éléments en ligne et les éléments de bloc que vous pouvez prendre comme indiqué ci-dessous: -

 inline-elements :- <img style="vertical-align:middle" ...>
                   <span style="display:inline-block; vertical-align:middle"> foo<br>bar </span>  

block-elements :- <td style="vertical-align:middle"> ... </td>
                  <div style="display:table-cell; vertical-align:middle"> ... </div>
 

voir la démo: - http://jsfiddle.net/Ewfkk/2/