Comment centrer verticalement sur tous les navigateurs ? Centrer verticalement une image de taille variable dans un conteneur de hauteur fixe

Écritures XHTML qui fonctionnent sur tous les navigateurs :

 <p> <img src="img.jpg" alt=""/> </p>
<p><span><img src="img.jpg" alt=""/></span></p> 
 <p> 
   <img src="img.jpg" alt=""/> 
</p>

Ne fonctionne pas sur IE7 :

 <p><img src="img.jpg" alt=""/></p>

Le code CSS :

 p { 
height:200px; 
line-height:200px; 
text-align:center; /* centrage horizontal d'un 
élément en-ligne */ } 
 
img { 
vertical-align:middle; }

Concernant IE7, celui-ci a besoin d'espaces ou d'un élément "en-ligne" comme <span> autour de l'image pour déclencher le centrage. Pour entretenir sa réputation de maillon faible, sans doute.

BeliG pour Alsacreations sous licence Creative Commons

Précédent
Suivant