Expert prestashop

Boutique de module

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.

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