Utilisation du Vertical align

Qu'est-ce que c'est?

Le vertical align en CSS nous permet de gérer l'alignement vertical de nos éléments dans une page HTML. Pour voir ça, on peut commencer comme-ceci :

    
    
        <section class="parent">
        <div class="enfant">
            <p>Ici, on va voir comment centrer le contenu de cette balise p de manière vertical </p>
        </div>
        </section>
        
    

Position relative

Ici, on applique une position relative à la SECTION parent indiquant que l'élément va être positionné normalement dans le document, puis ensuite décalé, par rapport à lui même selon les valeurs qu'on indiquera aux propriétés 'top' , 'left' , 'bottom' et 'right'.

    
    
<style>
.parent{
    border: 1px solid black;
    height: 400px;
    position: relative;
}
</style>

Position absolue

Tandis qu'ici, on applique une position absolue à notre DIV enfant, indiquant qu'on le retire du cours normal de notre page HTML, siginifiant qu'aucun espace propre ne lui est crée dans notre page. Il ce positionenra donc, vis à vis de son ancetre le plus proche, notre SECTION parent dans cette exemple. Si aucun ancêtre n'est présent, il sera positioner directement vis-à-vis du bloc englobant initial comme le body ou le main. Ensuite, de la même manière que pour la position relative ci-dessus, on pourra gérer la position de notre élements avec les valeurs indiquée aux propriétés 'top' , 'left' , 'bottom' et 'right'.

    
    
<style>

.enfant{
    position: absolute;
    top: 50%;    
}
</style>

    

Ce qui nous donne donc ceci, avec notre texte centrer au millieu, de notre section, à laquelle on appliqué une bordure solide pour bien délimité l'espace, on voit donc que la balise p est au millieu de notre section grâce à la valeur 50% appliqué à la propriété top.

On voit par ailleur la différence facilement si on applique une valeurs de 20% par exemple au lieu de 50% :

    
    
<style>

.enfant{
    position: absolute;
    top: 20%;    
}
</style>

    

Ce qui nous donne cette fois, un texte plus proche du bord suppérieur de notre séction :

Dernière choses à comprendre, lorsque l'ont fait du vertical align, la position réference de notre div est dans le coin supérieur gauche par rapport à son contenant, les valeurs de 'top' , 'left' , 'bottom' et 'right' prennent donc toutes ce coin suppérieur gauche comme point de départ, on le voit facilement si on retire la propriété top ici, ça nous donne :

    
    
<style>

.enfant{
    position: absolute;    
}
</style>

    

On voit bien ici, que sans propriété 'top' , 'left' , 'bottom' ou 'right', notre balise p ce retrouve en haut à gauche