Centre sur l'autre axe

🎯 Objectif

Centrer verticalement un contenu dans sa barre. Une ligne aujourd'hui — un cauchemar pendant quinze ans.

📖 Exemple

Le bandeau de la médiathèque, deux fois : le premier laissé à son réglage par défaut, le second avec align-items: center. Même hauteur, tout autre allure :

<header class="haut">
    <p>Médiathèque</p>
    <p>Ouvert jusqu'à 19 h</p>
</header>

<header class="milieu">
    <p>Médiathèque</p>
    <p>Ouvert jusqu'à 19 h</p>
</header>

.haut,
.milieu {
    display: flex;
    justify-content: space-between;
    height: 56px;
    margin-bottom: 8px;
    padding: 0 16px;
    background-color: #d45e95;
}

.milieu {
    align-items: center;
}

.haut p,
.milieu p {
    margin: 0;
}

Pourquoi le premier texte colle-t-il en haut ? Parce que la valeur par défaut d'align-items est stretch : chaque enfant s'étire sur toute la hauteur du conteneur, et son texte commence donc tout en haut de sa propre boîte. Avec center, chaque enfant reprend sa hauteur naturelle et se pose sur la ligne médiane. Avant 2013, ce centrage vertical était un problème non résolu — marges négatives, faux tableaux, bricolages qui cassaient dès que le texte passait sur deux lignes. Aujourd'hui, deux mots.

Le stretch par défaut n'est pas un défaut de conception : c'est exactement ce qu'on veut pour des cartes côte à côte, qui doivent toutes finir à la même hauteur. Et le schéma montre les deux autres valeurs, flex-start et flex-end — accrochés au bord haut, ou au bord bas.

La paire à retenir : justify-content commande l'axe principal (l'horizontale, en rangée), align-items l'axe secondaire (la verticale). Les deux sur le conteneur — ensemble, elles centrent n'importe quoi dans n'importe quoi. Note-la quelque part, tu la réécriras des centaines de fois.

♿ Un texte centré verticalement dans sa barre reste lisible quand la personne agrandit la police — beaucoup de gens le font, jusqu'à 200 %. Une mise en page qui suppose une hauteur de texte fixe finira par casser ; Flexbox, lui, recalcule tout seul.

📝 Consigne

L'en-tête du club fait 80 pixels de haut, et ses deux textes restent collés en haut. Dans l'onglet CSS :

1. Dans la règle .entete, ajoute la propriété align-items avec la valeur center

Ne touche pas à la hauteur : centrer, ce n'est pas rétrécir la barre jusqu'à ce que le vide disparaisse.