Expert prestashop

Centrer verticalement en css

Comment centrer verticalement une image dont on ne connais pas la hauteur dans un conteneur de hauteur connu.

Le html tout simple:


<div class="conteneur">
  <img src="monimage.jpg" alt="" />
</div>

Le css pas plus compliqué


.conteneur {
height:200px;
line-height:200px;
}
.conteneur img {
vertical-align:middle;
}

Si vous voulez aller plus loin dans le centrage vertical je vous conseille la lecture de cet excellent article sur Alsacreations.

A noter que selon le doctype de la page cela ne fonctionne pas toujours le XHTML strict semble être nécessaire.

Partager cet article:
    
            

Commentaires

4 commentaires pour “Centrer verticalement en css”

  • shelko

    Personnellement j’utilise la bonne vielle méthode avec le décalage de 50%, c’est peut être pas la plus simple, mais elle fonctionne pour le centrage horizontal et vertical et je n’ai jamais eut de soucis avec.

  • maniT4c

    quand tu parle de décalage tu veux dire quoi ? Un position absolute à 50% ? Car si c’est le cas tu es obligé de connaître la hauteur de ton image car c’est le haut de ton image qui sera placé à 50% et donc elle ne sera pas réellement centrée.

  • informaticien51

    la balise vertical-align sert à centrer l’image par rapport a du texte.
    Je ne vois pas reelement l’utilité du line-height.
    si tu met top, ton texte commence en haut de ton image, et bottom en bas de ton image.

  • maniT4c

    @informaticien51 Euh j’avoue qu’il faudrait que je refasse des tests mais de mémoire il me semble qu’il à son utilité.

  • Laisser un commentaire