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

Navigateurs