Centrage vertical d'une image dans un conteneur de hauteur fixe

Bonjour,

Je vous propose une petite astuce de CSS, qui vous sera peut-être utile pour centrer une image de de dimensions variables dans un conteneur de dimensions fixes.

Les conditions sont les suivantes:
- le conteneur doit avoir une hauteur fixe (à priori en pixels, à la rigueur en pt ou em, mais pas en pourcentages);
- l'image doit être le seul contenu de ce conteneur (pas de texte directement à côté ou en-dessous).

Le principe est le suivant: on va centrer l'image avec un text-align: center, et un vertical-align: middle, et un line-height de la hauteur du conteneur. Ce qui nous donne (je mélange code HTML et CSS pour faire simple, à vous d'adapter):

<div class="imagebox"><img alt="" src="..." /></div>

.imagebox {
	width: 200px;
	height: 200px;
	line-height: 200px;
	text-align: center;
}
.imagebox img {
	vertical-align: middle;
}

Mais pour obtenir quelque de compatible avec Internet Explorer (et notamment IE6), ça va demander quelques subtilités supplémentaires. Vous pouvez voir ça sur Centrer une image de dimensions variables dans un conteneur de dimensions fixes.

Ça vous sera peut-être utile.

Florent V. a écrit :
- l'image doit être le seul contenu de ce conteneur (pas de texte directement à côté ou en-dessous).

L'utilisation de la technique reste donc extrêmement limitée...

Pour donner l'illusion que l'image se trouve centrée dans un conteneur avec background coloré, appliquer un border sur l'image est tout de même plus simple, non ?

BeliG a écrit :
L'utilisation de la technique reste donc extrêmement limitée...

Ben oui, j'ai pas inventé le support universel de display: table-cell, non plus.
Si besoin d'un centrage vertical moins limité, utiliser un tableau (ou du display: table-cell si on ne se préoccupe pas d'IE6 et 7).

BeliG a écrit :
Pour donner l'illusion que l'image se trouve centrée dans un conteneur avec background coloré, appliquer un border sur l'image est tout de même plus simple, non ?

Heu... oui, mais encore faut-il que les images aient la même hauteur. Ce qui n'est pas le cas ici.
Ça peut être utile pour une série de vignettes de photo, par exemple, si on ne veut pas couper les images dans un format unique (comme flickr, par exemple, qui utilise des vignettes carrées).
Modifié par Florent V. (25 Jul 2008 - 17:50)

Je croyais que IE6 ne connaissait pas "inline-block" alors comment est-ce possible que cela corrige quoi que ce soit ?

Changaco a écrit :
Je croyais que IE6 ne connaissait pas "inline-block" alors comment est-ce possible que cela corrige quoi que ce soit ?

Internet Explorer comprend "inline-block", mais uniquement pour les éléments de type en-ligne. On ne peut pas passer un DIV, P ou autre élément de type bloc en display: inline-block dans IE 6 et 7 (ça devrait être possible dans IE 8). Mais c'est possible pour les éléments de type en-ligne tels que les SPAN.

Florent V. a écrit :
Internet Explorer comprend "inline-block", mais uniquement pour les éléments de type en-ligne. On ne peut pas passer un DIV, P ou autre élément de type bloc en display: inline-block dans IE 6 et 7 (ça devrait être possible dans IE 8). Mais c'est possible pour les éléments de type en-ligne tels que les SPAN.

Ok merci.

Vraiment pour chipoter, une division pour baliser un contenu en ligne, c'est pas un peu overkill? Un simple paragraphe me paraît plus approprié.
Je ne connaissais pas l'astuce pour IE sinon, merci!