Comment centrer verticalement sur tous les navigateurs ? Centrer verticalement un bloc dans un conteneur de hauteur fixe

Code pour centrer verticalement un bloc dans un conteneur de hauteur fixe :

<div class="conteneur"> 
   <div class="bloc">
       <h3>Kikoo !</h3>
 
       <p>Lorem ipsum [...]</p>
   </div>    
   <span></span>
</div>
 div.conteneur { 
height:200px;
line-height:200px;
text-align:center; /* centrage horizontal */ }
 
div.bloc {
width:100px;
border:1px solid #fff;
vertical-align:middle;
display:inline-block;
line-height:1.2; /* on rétablit le line-height */
text-align:left; /* ... et l'alignement du texte */ }

 

Et pour IE7 seulement, à l'aide des commentaires conditionnels par exemple :

div.bloc { 
display:inline; /* correctif inline-block */ }
 
div.conteneur > span { 
zoom:1; /* layout */ }

 

La technique utilisée ici est très similaire à la précédente. Seul le correctif pour IE7 est un peu plus élaboré.

Sur IE7, le centrage vertical ne pose pas de problème avec des blocs alignés dans un conteneur de hauteur fluide (voir la méthode suivante du tutoriel). D'où l'idée d'utiliser un <span> de pleine hauteur mais de largeur nulle pour déclencher le line-height (un <span> doté du layout occupera toute la hauteur de son parent. La propriété display:inline-block permettant également de conférer le layout à un élément, on pourrait aussi l'utiliser à la place de zoom:1).

Et enfin, vous aurez remarqué le choix d'un sélecteur d'enfant ( > ) pour cibler le <span>, ce qui nous évite d'alourdir inutilement le code (X)HTML avec une classe CSS supplémentaire.

 

BeliG pour Alsacreations sous licence Creative Commons

Navigateurs