Center
À quoi il sert
Center centre un bloc dans l’axe inline et limite sa largeur à la mesure de lecture.
Quand l’utiliser
- Centrer une colonne de texte ou une section à largeur de lecture, sur un grand écran.
- Centrer un groupe d’éléments selon leur largeur propre, avec intrinsic.
Quand ne pas l’utiliser
- Pour un texte long : text centre chaque ligne, ce qui se lit moins bien (convention typographique).
- Pour aligner un bloc à gauche ou à droite : Center n’offre aucune option de ce type.
Exemples
Texte centré avec marge latérale
Ce paragraphe est centré, avec une marge latérale de taille m.
Enfants centrés selon leur largeur propre
Un premier paragraphe court.
<Center text gutter="m" as="section">
<p>Texte centré, à largeur de lecture.</p>
</Center>
<Center intrinsic gutter="s">
<button type="button">Action</button>
</Center>Accessibilité
Clavier
- Le composant n’est pas interactif et ne reçoit jamais le focus.
- Les éléments interactifs passés en enfants gardent leur focus natif.
Lecteur d’écran
- Un div ne porte aucun rôle : le contenu est lu dans l’ordre du DOM.
- as expose le rôle natif de l’élément choisi : main, header, footer, article, section.
Garanti par le composant
- Marges inline automatiques et largeur limitée par --pp-size-measure (Center.test.ts).
- text centre le texte, intrinsic centre les enfants selon leur largeur (Center.astro).
- Aucun attribut style et aucun JavaScript (Center.test.ts).
À la charge de l’intégrateur
- Choisir as selon le contenu : une seule balise main par page, selon la spécification HTML.
- Tester le texte centré avec un contenu long et des libellés plus longs que ceux de l’exemple.
- Garder gutter sur mobile si le contenu touche les bords de l’écran.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| text | boolean | false | Centre aussi le texte. |
| intrinsic | boolean | false | Centre les enfants selon leur largeur propre. |
| gutter | "s" | "m" | — | Marge intérieure en ligne, pour que le contenu ne touche pas les bords sur mobile. |
| as | "div" | "section" | "article" | "main" | "header" | "footer" | 'div' | Élément HTML rendu (sémantique de la page). |
| class | string | — | Réservé au placement du composant dans son parent. |
Jetons utilisés
--pp-size-measure--pp-space-m--pp-space-s
Preuves et décisions
- WCAG 1.4.10 Reflow : marges et largeur limitée ; non testé à 320 px
- Mise en page : layout.spec.ts vérifie marges égales et max-inline-size
- Tests : packages/astro/test/Center.test.ts
- Code source : packages/astro/src/layout/Center.astro