Aligner des éléments en CSS

Il y a de (très) nombreuses façons d’aligner des éléments en CSS. Voici quelques recettes et ressources pour démarrer.

Aligner du contenu

Pour aligner horizontalement du contenu (le plus souvent du texte, parfois une image), on utilisera la propriété CSS text-align.

Aligner des contenants

Pour aligner des contenants comme des balises div ou form, il faut utiliser d’autres propriétés. Pour aligner simplement horizontalement, on utilisera une des propriétés suivantes : margin, margin-line-start et margin-line-end (margin-left, margin-right sont déconseillées), margin-inline :

html

<body>
  <div class="container-h-center">
    Sera aligné au centre
  </div>
</body>

css

.container-h-center {
  /* Soit */
  margin-inline: auto; /* Cette ligne seule est équivalente aux deux suivantes */

  /* Soit */
  margin-line-start: auto;
  margin-line-end: auto;
}

Alignements et layout plus complexes

Flexbox

Il est recommandé d’utiliser un conteneur flex parent pour des mises en page et agencements complexes :

Cf. MDN et CSS-Tricks.

CSSGrid

Pour des mises en page et agencements encore plus complexes, il existe aussi CSS Grid :

Cf. MDN et CSS-Tricks et le cours gratuit (en anglais) de Wes Bos et aussi le Guide interactif de Josh Cormeau.