Centrer du texte verticalement

En faisant un peu de HTML pour m’amuser, je me suis rendu compte que je butais fasse à quelque chose qui me semblait évident.

Comment centrer verticalement un élément dans une box ?

C’est alors que je me suis rendu compte au gré de mes recherche, que cela n’était guère évident.

Au fur et à mesure des version de CSS, il y a eu plusieurs solutions qui ont émergé. Et il n’y a donc pas de solution évidente qui ressort.

Le but de cet article est donc d’exprimer la solution la plus approprié en notre temps.

Tout d’abord, voici ce que je veux réaliser :

Le code CSS qui permet de réaliser l’alignement vertical de Catégorie X dans les box de couleur est le suivant :

display: flex;
align-items: center;

Pour avoir une vision d’ensemble voici l’intégralité du code mis en oeuvre :

Le code HTML :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="test.css"/>
        <title>Test</title>
    </head>

    <body>
        <div id="main">
            <div id="bloc1">Catégorie 1</div>
            <div id="bloc2">Catégorie 2</div>
            <div id="bloc3">Catégorie 3</div>
        </div>
    </body>
</html>

Le code CSS :

#main {
    margin: 100px;
    width: 600px;
    height: 400px;
    border: 3px solid black;
    background-color: rgb(7, 6, 73);
}

#bloc1 {
    width: 100px;
    height: 100px;
    margin-top: 20px;
    margin-left: 20px;
    padding-left: 10px;
    border: 3px solid black;
    border-radius: 10px;
    background-color: rgba(255,0,0,0.2);
    color:white;
    display: flex;
    align-items: center;
}

#bloc2 {
    width: 100px;
    height: 100px;
    margin-top: 20px;
    margin-left: 20px;
    padding-left: 10px;
    background-color: rgba(0,250,0,0.2);
    border: 3px solid black;
    border-radius: 10px;
    color:white;
    display: flex;
    align-items: center;
}

#bloc3 {
    width: 100px;
    height: 100px;
    margin-top: 20px;
    margin-left: 20px;
    padding-left: 10px;
    background-color: rgba(255, 174, 0, 0.2);
    border: 3px solid black;
    border-radius: 10px;
    color:white;
    display: flex;
    align-items: center;
}

SMARTFUL

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *