Toutes les clefs pour réussir dans le e-commerce

Mes modules 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.

Poster un Commentaire

4 Commentaires sur "Centrer verticalement en css"

Recevoir un email pour

Invité
4 années 4 mois plus tôt

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.

Invité
informaticien51
4 années 2 mois plus tôt

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.

wpDiscuz