Comment centrer verticalement sur tous les navigateurs ? Centrer verticalement des blocs dans un conteneur de hauteur fluide

Code pour centrer verticalement des blocs dans un conteneur de hauteur fluide :

 <div class="conteneur"> 
 
   <div class="bloc"> 
       <p>Cras mollis [...]</p> 
   </div> 
    
   <div class="bloc"> 
       <p>Lorem ipsum [...]</p> 
   </div> 
    
</div>

 div.conteneur { 
text-align:center; /* centrage horizontal */ } 
 
div.bloc { 
width:100px; 
margin:0 10px; /* espacement horizontal des blocs */ 
border:1px solid #fff; 
display:inline-block; 
vertical-align:middle; 
text-align:left; /* on rétablit 
l'alignement du texte */ }

Et pour IE7 :

 div.bloc { 
display:inline; /* correctif inline-block */ }

Rien d'extraordinaire dans cette technique, on applique simplement les bases du display:inline-block, sans oublier le correctif pour IE7 qui ne reconnait inline-block que pour les éléments naturellement "en-ligne".

Notez toutefois que pour fonctionner sur IE7, le bloc doit également avoir le layout (qui est conféré automatiquement si celui-ci a une largeur fixe en pixel ou en pourcentage. Si ce n'est pas le cas, et en dernier recours, on pourra ajouter un zoom:1 ou un height:1% au correctif).

Conclusion

Les méthodes exposées dans ce tutoriel devraient vous permettre de coder vous-même les quelques cas de figure manquants (notamment en ce qui concerne les conteneurs de hauteur fluide).

N'oubliez pas que les résultats obtenus dépendent fortement du contexte dans lequel sont placés les éléments. Et que ceux-ci peuvent être décalés de quelques pixels (par rapport à un centrage parfait) en fonction de la police et de sa taille.

Le décalage reste tout de même quasiment invisible à l'oeil nu. Vous pouvez donc utiliser sans crainte ces solutions en production.

BeliG pour Alsacreations sous licence Creative Commons