web-dev-qa-db-fra.com

aligner verticalement l'image en div

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!

cssimagevertical-alignment
58
aainaarz

Si votre conteneur contient une hauteur fixe, vous pouvez définir une hauteur de ligne identique à la hauteur, qui sera centrée verticalement. Ensuite, ajoutez simplement texte-aligner au centre horizontalement.

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

[~ # ~] éditer [~ # ~]

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ées horizontalement et verticalement, quelle que soit leur taille. Voici 2 autres exemples avec des images de différentes dimensions:

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

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

[~ # ~] met à jour [~ # ~]

Nous sommes en 2016 (le futur!) Et il semble que quelques choses changent (enfin !!).

En 2014, Microsoft a annoncé qu'il cesserait de prendre en charge IE8 dans toutes les versions de Windows et encouragerait tous les utilisateurs à mettre à jour IE11 ou Edge. Eh bien, cela est censé se produire mardi prochain (12 janvier).

Pourquoi est-ce important? Avec la mort annoncée de IE8 , nous pouvons enfin commencer à utiliser la magie CSS3 .

Cela dit, voici une méthode actualisée d’alignement des éléments, à la fois horizontalement et verticalement:

.container {
    position: relative;
}

.container .element {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

En utilisant cette méthode transform: translate();, vous n'avez même pas besoin d'avoir une hauteur fixe dans votre conteneur , il est totalement dynamique . Votre élément a une hauteur ou une largeur fixe? Votre conteneur aussi? Non? Peu importe, cela sera toujours centré car toutes les propriétés de centrage sont fixées sur l'enfant, elles sont indépendantes du parent. Merci CSS3.

Si vous ne devez vous centrer que dans une seule dimension, vous pouvez utiliser translateY ou translateX. Essayez-le pendant un moment et vous verrez comment cela fonctionne. Aussi, essayez de changer les valeurs de translate, vous le trouverez utile pour un tas de situations différentes.

Ici, un nouveau violon: https://jsfiddle.net/Cthulhu/1xjbhsr4/

Pour plus d'informations sur transform, voici une bonne ressource .

Bonne codage.

132
Cthulhu

Ancienne question mais de nos jours CSS rend l'alignement vertical vraiment simple!

Il suffit d'ajouter à la <div> ce css:

display:flex;
align-items:center;
justify-content:center;

démo JSFiddle

Exemple en direct: 

.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;
    display:flex;
    align-items:center;
    justify-content:center;
}
<div class="img_thumb">
    <a class="images_class" href="http://i.imgur.com/2FMLuSn.jpg" rel="images">
       <img src="http://i.imgur.com/2FMLuSn.jpg" title="img_title" alt="img_alt" />
    </a>
</div>
23
Jaqen H'ghar

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/

3
Shailender Arora