Tout texte peut être aligné à gauche, au centre ou à droite d'une page Web. Les images peuvent également être alignées sur une page Web de la même manière que le texte. Vous trouverez ci-dessous des exemples montrant comment aligner du texte et des images à gauche, à onglet, au centre et à droite.

Conseil: si l'un de vos alignements de texte ne fonctionne pas, assurez-vous que les autres classes ou styles CSS appliqués au même élément ou à un élément contenant ne sont pas en conflit avec la justification que vous tentez de créer.

Remarque: avec ces exemples et la plupart des alignements, le texte est aligné dans l'élément contenant le texte. Le texte peut être centré dans un div HTML et être aligné à gauche sur le reste de la page Web. De même, tout ce qui est contenu dans la balise contenant la justification CSS (par exemple, une image) est également aligné.

Exemples d'alignement

Aligné à gauche

Onglet aligné

Aligné au centre

Aligné à droite

Exemple aligné à gauche

Par défaut, l'anglais et les autres langues alignent le texte à gauche. Toutefois, si l'élément contenant le texte ou l'image est aligné à droite ou si vous devez modifier l'alignement du texte ou de l'image, le code ci-dessous peut être ajouté à votre élément ou à CSS.

Code HTML

Aligné à gauche

Conseil: Voir les conseils supplémentaires ci-dessous pour le réglage de l'alignement, du remplissage et de la marge d'un élément.

Exemple d'alignement de tabulation

Bien qu'il n'y ait pas d'alignement de texte "tabulation", une marge gauche peut être ajoutée à un élément pour l'apparence d'un alignement de tabulation, comme indiqué ci-dessous.

Code HTML

Onglet aligné

Conseil: Voir les conseils supplémentaires ci-dessous pour le réglage de l'alignement, du remplissage et de la marge d'un élément.

Exemple centré

À l'aide de l'attribut text-align, vous pouvez centrer le texte ou l'image d'un élément, comme illustré dans l'exemple ci-dessous.

Code HTML

Aligné au centre

Conseil: Voir les conseils supplémentaires ci-dessous pour le réglage de l'alignement, du remplissage et de la marge d'un élément.

Exemple aligné à droite

À l'aide de l'attribut text-align, vous pouvez centrer le texte ou l'image d'un élément, comme illustré dans l'exemple ci-dessous.

Code HTML

Aligné à droite

Conseil: vous pouvez également utiliser CSS pour aligner à droite une image sur une page Web.

Conseil: Voir les conseils supplémentaires ci-dessous pour le réglage de l'alignement, du remplissage et de la marge d'un élément.

Conseils d'alignement supplémentaires

Vous trouverez ci-dessous d'autres astuces d'alignement pouvant être appliquées à l'une des règles de style ci-dessus ou à d'autres classes CSS.

1. Une marge supplémentaire peut être ajoutée à l'un des styles ci-dessus si vous avez besoin d'indentation supplémentaire ou si vous souhaitez plus de remplissage. Par exemple, vous pouvez appliquer une marge droite à l'exemple aligné à droite pour déplacer le texte plus loin dans l'élément.
2. Si vous souhaitez une page plus réactive, assurez-vous d’ajuster ou de supprimer toute justification gauche ou droite lorsqu’elle est affichée sur un écran plus petit.