Les alignements verticaux en CSS

Par Nouvelle-Techno.fr le 2 octobre 2021 - Catégories : CSS

Ce tutoriel traite des techniques permettant de gérer l'alignement vertical d'éléments dans une page HTML.

Pour commencer, nous allons créer une structure HTML basique comme suit

<section class="container">
    <div class="contenu">
        <p>Le contenu centré verticalement.</p>
    </div>
</section>

Le but sera de centrer verticalement le contenu la balise <p> dans son conteneur.

La technique du positionnement

Nous pouvons utiliser le positionnement relatif et absolu pour effectuer cet alignement vertical.

Nous mettrons la section .container en position relative et la div .contenu en position absolue.

.container{
    border: 1px solid black;
    height: 400px;
    position: relative;
}

.contenu{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

La propriété transform permettra de compenser le décalage vertical apporté par le top à 50%.

La technique de la flexbox

Nous pouvons utiliser la flexbox pour effectuer cet alignement vertical.

Nous mettrons la section .container en flexbox et la div .contenu se placera sans aucun CSS associé.

.container{
    border: 1px solid black;
    height: 400px;
    display: flex;
    align-items: center;
}

L'alignement vertical dans un tableau

Dans un tableau, il est possible d'utiliser une autre propriété qui est vertical-align.

Dans ce cas, sur la base du code HTML suivant

<table>
    <tr>
        <td>Texte court</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste quaerat molestiae cum similique quo, aspernatur eos. Vel necessitatibus eveniet nulla quam incidunt aliquid, in quia, reiciendis error molestiae laudantium ad.</td>
        <td>Texte court</td>
    </tr>
</table>

Nous allons aligner verticalement le contenu des cellules <td>.

td{
    vertical-align: middle;
}

L'alignement vertical des images

Les images permettent également d'utiliser la propriété vertical-align.

Dans ce cas, sur la base du code HTML suivant

<p>
    Texte
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-align-middle" viewBox="0 0 16 16">
        <path d="M6 13a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v10zM1 8a.5.5 0 0 0 .5.5H6v-1H1.5A.5.5 0 0 0 1 8zm14 0a.5.5 0 0 1-.5.5H10v-1h4.5a.5.5 0 0 1 .5.5z"/>
    </svg>
</p>

Nous pourrons aligner verticalement notre image en utilisant le code suivant

p svg{
    vertical-align: middle;
}

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat

#css #alignement #vertical