Sélection de la langue

Recherche

Alignement

Travail en cours

Cette page est un travail en cours.

Veuillez présenter une question ou envoyer une demande d'extraction si des renseignements ou des codes sont manquants, inexacts ou décalés par rapport au référentiel principal (wet-boew/wet-boew).

Usage

Utilisez cette fonction pour aligner le texte à gauche, au centre ou à droite. Sinon, utilisez-la pour aligner un bloc de contenu ou une image au centre.

Conception et codage

Utilisation de base

Texte aligné à gauche

Utilisez cette fonction pour aligner le texte à gauche.

Apparence

(Le contenu est indiqué ici)

Bonne utilisation

Point d'observation :

  • Appliquez .text-left à un élément pour aligner à gauche le texte qu'il contient
Mauvaise utilisation

Points de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec le point d'observation précédent
  • N'utilisez pas cette fonction pour aligner des renseignements non textuels
Code
<p class="text-left">...</p>

Texte aligné au centre

Utilisez cette fonction pour aligner le texte au centre.

Apparence

(Le contenu est indiqué ici)

Bonne utilisation

Points de conformité :

  • Appliquez .text-center à un élément pour aligner au centre le texte qu'il contient
  • Appliquez au besoin, aux cellules de données d'un tableau afin d'imiter des tableaux comptables
Mauvaise utilisation

Points de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
  • Évitez cet élément, sauf s'il ajoute de la valeur au contenu.

    Les textes alignés au centre et à droite présentent sont tous deux « décalés » à gauche, ce qui a été démontré nuire à la vitesse de lecture et à la compréhension. La combinaison d'une bordure gauche droite (ou « nette ») et d'une bordure droite décalée du texte aligné à gauche standard est ce qui fonctionne le mieux pour les lecteurs, car cela aide l'oeil à trouver le début de la prochaine ligne lorsqu'il quitte la fin de la dernière ligne.

    (Aucune justification : n'utilisez pas la justification à droite, au centre ou complète dans le Web)
Code
<p class="text-center">...</p>

Centrer des blocs de contenu

Utilisez cette fonction afin de centrer un bloc dans son ensemble, y compris le texte. Centrer un bloc prend un élément dont la largeur est fixe, et applique une marge gauche et une marge droite égales, ce qui centre le contenu.

Apparence
Une image de paramètre fictif carré dont les coins sont arrondis
Bonne utilisation

Point d'observation :

  • Appliquer .center-block à un bloc d'éléments dont la largeur est fixe pour l'aligner au centre
Mauvaise utilisation

Points de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec le point d'observation précédent
  • Évitez cet élément, sauf s'il ajoute de la valeur au contenu.

    Les textes alignés au centre et à droite présentent sont tous deux « décalés » à gauche, ce qui a été démontré nuire à la vitesse de lecture et à la compréhension. La combinaison d'une bordure gauche droite (ou « nette ») et d'une bordure droite décalée du texte aligné à gauche standard est ce qui fonctionne le mieux pour les lecteurs, car cela aide l'oeil à trouver le début de la prochaine ligne lorsqu'il quitte la fin de la dernière ligne.

Code
<img class="center-block" alt="..." src="x.jpg" />

Utilisez cette fonction pour aligner le texte à droite.

Apparence

(Le contenu est indiqué ici)

Bonne utilisation

Points de conformité :

  • Appliquez .text-right à un élément pour aligner à droite le texte qu'il contient
  • Appliquez cette fonction, au besoin, aux cellules de données d'un tableau afin d'imiter des tableaux comptables
Mauvaise utilisation

Points de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
  • Évitez cet élément, sauf s'il ajoute de la valeur au contenu.

    Les textes alignés au centre et à droite présentent sont tous deux « décalés » à gauche, ce qui a été démontré nuire à la vitesse de lecture et à la compréhension. La combinaison d'une bordure gauche droite (ou « nette ») et d'une bordure droite décalée du texte aligné à gauche standard est ce qui fonctionne le mieux pour les lecteurs, car cela aide l'oeil à trouver le début de la prochaine ligne lorsqu'il quitte la fin de la dernière ligne.

Code
<p class="text-right">...</p>

Une partie du code et des documents pour cette page provient de Bootstrap (lien externe)

Date de modification: