Utilitaires

Alignement vertical

Les classes align-* modifient l’alignement vertical d’éléments en ligne, de cellules de tableau et d’éléments inline-block. Elles n’agissent pas sur les blocs ni sur les éléments flex.

Éléments en ligne#

Dans une ligne de texte, l’alignement se règle sur chaque élément en ligne.

baseline top middle bottom text-top text-bottom

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

Cellules de tableau#

Dans un tableau, appliquez la classe à la cellule (td ou th).

baseline

top

middle

bottom

text-top

text-bottom

<table class="table" style="height: 8rem">
  <tbody>
    <tr>
      <td class="align-baseline">baseline</td>
      <td class="align-top">top</td>
      <td class="align-middle">middle</td>
      <td class="align-bottom">bottom</td>
      <td class="align-text-top">text-top</td>
      <td class="align-text-bottom">text-bottom</td>
    </tr>
  </tbody>
</table>

Classes disponibles

Pour aligner des enfants d’un conteneur flex, utilisez plutôt align-items-* et align-self-* de la page Flex.

Classes disponibles
Classe	Propriété CSS
`align-baseline`	`vertical-align: baseline`
`align-top`	`vertical-align: top`
`align-middle`	`vertical-align: middle`
`align-bottom`	`vertical-align: bottom`
`align-text-top`	`vertical-align: text-top`
`align-text-bottom`	`vertical-align: text-bottom`

Bonnes pratiques

À faire

Utilisez align-middle pour centrer verticalement le contenu des cellules d’un tableau de comptes ou de mensualités.
Utilisez align-text-bottom ou align-middle pour caler une petite icône sur le texte qui la suit.

À éviter

N’essayez pas align-middle sur un div : il faut un conteneur flex, voir la page Flex.

Accessibilité

L’alignement vertical est purement visuel : il ne change pas l’ordre de lecture du contenu.