Vous avez déjà eu besoin de centrer du texte verticalement dans un bloc dont la hauteur varie ?
Voici une solution qui devrait vous convenir.

TL;DR : Voici le JSFiddle de l’exemple de cet article.

Voici les éléments avec lesquels on va travailler :

  • un bloc à hauteur variable : .bloc-hauteur-variable
  • un bloc à centrer verticalement : .bloc-a-centrer
  • un bloc wrapper autour du bloc à centrer verticalement : .bloc-wrapper

Ce qui nous donne en HTML :

<div class="bloc-hauteur-variable">
    <div class="bloc-wrapper">
        <div class="bloc-a-centrer">
            Mon texte sur une deux, plusieurs lignes, une image, un tableau, que sais-je.
        </div>
    </div>
</div>

Pour commencer, .bloc-hauteur-variable doit être en position relative, ensuite, on met en place une partie de l’astuce d’Alsacréations sur le centrage vertical :

Subtilité : assurez-vous que la hauteur de .bloc-wrapper soit plus grande que le contenu que vous souhaitez centrer. (Ici, j’ai pris 400px)

.bloc-hauteur-variable {
    position: relative;
}
 
.bloc-wrapper {
    height: 400px;
    line-height: 400px;
}
 
.bloc-a-centrer {
    line-height:1.2;
    display: inline-block;
    vertical-align: middle;
    /* Coucou IE */
    *display: inline;
    *zoom: 1;
}

Enfin, on met en place un alignement vertical en positionnant .bloc-wrapper à 50% du haut de son parent. On rajoute une marge négative égale à la moitié de la hauteur (permise par le positionnement) afin de parfaitement centrer le tout.

.bloc-hauteur-variable {
    /* Hauteur Arbitraire */
    height:632px;
    outline: 1px solid #ccc;
    position: relative;
}
 
.bloc-wrapper {
    position:absolute;
    top:50%;
    /* margin-top = -(height/2) */
    margin-top:-200px;
    height: 400px;
    line-height: 400px;
}
 
.bloc-a-centrer {
    line-height:1.2;
    display: inline-block;
    vertical-align: middle;
    /* Coucou IE */
    *display: inline;
    *zoom: 1;
}

En conclusion

Cette technique tient un peu du bazooka, car elle combine deux techniques d’alignement vertical : On centre verticalement un bloc dont on connait la hauteur moyenne, dans lequel on centre un bloc dont la hauteur est inconnue.

Cela fonctionne sur la majorité des navigateurs, dont IE8 & 9 (Le contenu ne sera pas centré sur IE 7). Les cas d’utilisation sont peu communs, mais on peut citer par exemple un site « full-screen », ou un menu centré dans une sidebar fixe.

Tags : , ,