Classe has-text-align-center dans WordPress : guide complet

 Mon texte centré avec WordPress et Gutenberg.

Le rôle de cette classe est de servir de « point d’accroche » au CSS du thème. Si votre thème est bien conçu, il inclura un style générique du type :

.has-text-align-center { text-align: center;
}

Cette approche présente plusieurs avantages :

• Respect des bonnes pratiques HTML et CSS (séparation du contenu et de la présentation).
• Compatibilité avec les thèmes enfants, leséditeurs visuels et les constructeurs de pages.
• Facilité de personnalisation globale du comportement des blocs alignés au centre.

Utilisation automatique vs. utilisation manuelle de la classe

Dans la plupart des cas, vous n’avez pas besoin d’ajouter vous‑même la classe has-text-align-center : Gutenberg se charge de l’ajouter automatiquement lorsque vous utilisez le bouton d’alignement centré dans l’éditeur.

Cependant, il existe deux scénarios où vous pouvez avoir besoin de manipuler cette classe manuellement :

• Ajout via le champ « Classe CSS additionnelle » d’un bloc : dans Gutenberg, chaque bloc dispose d’une option « Classes CSS additionnelles » dans l’inspecteur (panneau de droite). Vous pouvez y saisir has-text-align-center pour forcer le centrage d’un bloc, même si l’interface d’alignement ne le propose pas.
• Insertion directe dans un modèle ou un thème : si vous développez un thème, un bloc personnalisé ou un modèle de page, vous pouvez ajouter la classe directement dans le code HTML ou les templates PHP pour que certainséléments soient centrés par défaut.

Exemple dans un modèle PHP de thème :

Titre de section centré

Dans tous les cas, pour que l’effet soit visible, le CSS du thème doit déclarer un style pour cette classe.

Exemples concrets d’utilisation

Centrer un paragraphe dans une page ou un article

Imaginons que vous souhaitiez mettre en avant une phrase clé dans une page WordPress, par exemple un slogan ou une phrase d’accroche. Vous pouvez créer un bloc de paragraphe, saisir votre texte, puis utiliser l’icône d’alignement pour le centrer. Gutenberg générera alors un paragraphe ressemblant à :

 Ce texte est centré grâce à la classe has-text-align-center.

Visuellement, le texte sera centré dans la largeur du conteneur, ce qui peutêtre très utile pour créer unéquilibre visuel, mettre en valeur une citation ou mettre l’accent sur un appel à l’action (CTA).

Centrer les titres avec has-text-align-center

Les blocs « Titre » (H2, H3, H4, etc.) peuvent eux aussiêtre centrés via l’éditeur. Quand vous choisissez l’alignement centré pour un bloc de titre, la même classe has-text-align-center est utilisée :

 Un titre H2 centré avec WordPress

Le thème applique alors un text-align: center; sur ce titre. Cette pratique est souvent utilisée pour des titres de sections ou des accroches dans des pages de vente, des landing pages ou des pages d’accueil.

Centrer le texte dans des blocs personnalisés

De nombreux blocs fournis par des extensions (par exemple des blocs d’avis, de témoignages, de boîtes d’icônes, etc.) s’appuientégalement sur la classe has-text-align-center pour gérer l’alignement de leur contenu. Si vous développez vos propres blocs personnalisés avec l’API de blocs de WordPress, vous pouvez réutiliser cette classe pour rester cohérent avec le reste de l’interface.

Par exemple, un bloc personnalisé pourrait générer le HTML suivant en fonction d’un attribut d’alignement choisi par l’utilisateur :

 
Texte personnalisé centré

Comment fonctionne le centrage en CSS ?

Pour bien comprendre ce que fait la classe has-text-align-center, il est utile de rappeler le principe de base du centrage horizontal du texte en CSS. Le centrage du texte passe généralement par la propriété text-align appliquée sur unélément conteneur.

Par exemple :

.has-text-align-center { text-align: center;
}

Appliqué à un paragraphe ou à un titre, ce style va centrer le texte sur la largeur disponible de son conteneur. Il ne déplace pas le bloc lui‑même sur la page, mais uniquement le contenu textuel à l’intérieur de l’élément.

Il est important de distinguer :

• L’alignement du texte (géré par text-align et donc par la classe has-text-align-center).
• L’alignement d’un bloc (par exemple un bloc image ou un bloc colonne) qui peut impliquer d’autres propriétés CSS, comme margin: 0 auto;, display: flex; ou justify-content: center;.

La classe has-text-align-center ne concerne que l’alignement du texte, pas le positionnement global des blocs. Pour centrer un bloc complet dans une mise en page, WordPress utilise d’autres classes comme aligncenter pour les images ou des options de mise en page de colonnes.

Compatibilité avec les thèmes WordPress

Pour que has-text-align-center fonctionne correctement, il est indispensable que votre thème prenne en charge les styles des blocs Gutenberg. La plupart des thèmes récents déclarent leur compatibilité en ajoutant une prise en charge de l’éditeur de blocs et en chargeant une feuille de style spécifique.

Si vous remarquez que l’alignement centré choisi dans l’éditeur n’est pas visible sur le site public, il est possible que :

• Votre thème ne définisse pas la règle CSS .has-text-align-center { text-align: center; }.
• Un style plus spécifique (par exemple p { text-align: left; } avec une forte spécificité) écrase le comportement de la classe.
• Une extension ou un constructeur de pages surcharge les styles de Gutenberg sans reproduire cette classe.

Dans ce cas, vous pouvez corriger le problème en ajoutant une règle CSS personnalisée via le personnalisateur (Apparence > Personnaliser > CSS additionnel) ou via le fichier style.css de votre thème enfant :

.has-text-align-center { text-align: center;
}

Si besoin, vous pouvez augmenter légèrement la spécificité :

body .has-text-align-center { text-align: center;
}

Personnaliser l’apparence du texte centré

La classe has-text-align-center peut servir de point de départ pour des personnalisations plus poussées. Vous pouvez par exemple décider que tous les textes centrés auront une typographie ou un espacement légèrement différents afin d’améliorer la hiérarchie visuelle de votre site.

Voici quelques exemples de règles que vous pourriez ajouter :

.has-text-align-center { text-align: center;
} .has-text-align-center.emphase { font-size: 1.2em; font-weight: 600; margin-top: 1.5rem; margin-bottom: 1.5rem;
} h2.has-text-align-center { letter-spacing: 0.05em; text-transform: uppercase;
}

Dans ce cas, vous pouvez combiner la classe has-text-align-center avec une classe supplémentaire (par exemple emphase) en la renseignant dans le champ « Classes CSS additionnelles » de Gutenberg. Cela vous permet d’obtenir un style plus travaillé pour certainséléments clés.

Impact sur l’expérience utilisateur et l’accessibilité

Le centrage du texte peut améliorer l’esthétique d’une page, mais il doitêtre utilisé avec modération. Des blocs entiers de texte alignés au centre peuvent nuire à la lisibilité, en particulier pour les paragraphes longs. Les utilisateurs dyslexiques ou ceux qui lisent sur de petitsécrans peuvent avoir plus de mal à suivre des lignes centrées, car le point de départ de chaque ligne varie.

Voici quelques recommandations d’accessibilité et d’ergonomie :

• Réservez le centrage auxéléments courts : titres, citations, phrases d’accroche, appels à l’action, petits blocs de texte.
• Évitez d’aligner de longs paragraphes au centre, notamment sur mobile, où la largeur de lecture est réduite.
• Assurez-vous que le contraste des textes centrés reste suffisant par rapport à l’arrière‑plan, surtout si vous les utilisez sur des sections colorées ou des images de fond.
• Testez vos pages sur différents appareils (ordinateur, tablette, smartphone) pour vérifier que le centrage ne provoque pas de ruptures de mise en page ou de comportements inattendus.

Bien utilisé, has-text-align-center contribue à une mise en page plus harmonieuse et à une meilleure hiérarchie visuelle, ce qui est positif pour l’expérience utilisateur et, indirectement, pour le référencement naturel.

Bonnes pratiques pour utiliser has-text-align-center

Pour optimiser l’utilisation de la classe has-text-align-center dans WordPress et garantir une mise en page efficace, voici quelques bonnes pratiques à suivre :

• Intégrer le texte centré dans une structure claire : utilisez le centrage pour mettre en valeur certainséléments (titre de section, preuve sociale, CTA), mais maintenez la majorité de vos paragraphes alignés à gauche pour conserver une bonne lisibilité.
• Maintenir une cohérence visuelle : appliquez le centrage selon une logique visuelle cohérente (par exemple, tous les titres principaux centrés, les sous‑titres alignés à gauche) plutôt que de l’utiliser de manière aléatoire.
• Tester l’affichage sur différents thèmes : si vous changez de thème, vérifiez que la classe has-text-align-center est toujours bien stylée. Certains thèmes peuvent nécessiter quelques ajustements CSS supplémentaires.
• Éviter le « tout centré » : un site où tout le contenu est centré peut devenir difficile à parcourir. Utilisez le centrage pour créer des points d’attention, pas comme style par défaut pour l’ensemble de vos textes.

En gardant ces points en tête, vous pouvez profiter de la classe has-text-align-center pour renforcer l’impact visuel de votre contenu sans sacrifier la lisibilité.

Outils et ressources utiles autour du centrage de texte

Plusieurs outils peuvent vous aider à optimiser l’utilisation de has-text-align-center et plus généralement la mise en forme de vos contenus dans WordPress :

• Inspecteur de navigateur (Chrome, Firefox, Safari…) : l’inspecteur intégré à votre navigateur vous permet de vérifier si la classe has-text-align-center est bien appliquée au HTML et quels styles CSS sont effectivement utilisés.
• Éditeur de thème ou CSS additionnel : dans l’administration WordPress, le personnalisateur ou l’éditeur de fichiers de thème vous permettent d’ajouter ou de modifier la règle .has-text-align-center pour l’adapter à votre charte graphique.
• Plugins de blocs : nombreux sont les plugins de blocs qui tirent parti des classes d’alignement de Gutenberg. Ils offrent des options supplémentaires tout en restant compatibles avec has-text-align-center.
• Extensions de CSS personnalisé : certaines extensions permettent d’ajouter facilement des règles CSS globales. Vous pouvez y déclarer vos styles spécifiques pour les textes centrés, sans toucher directement aux fichiers du thème.

Ces outils contribuent à contrôler précisément l’apparence du centrage sur tout le site, ce qui est particulièrement utile sur des projets complexes ou des sites multi‑auteurs.

Questions fréquentes sur has-text-align-center dans WordPress

• Pourquoi utiliser la classe has-text-align-center plutôt qu’une balise HTML de type  ?

L’utilisation d’une classe CSS permet de respecter les standards modernes du web : la balise

@media (max-width: 600px) { .long-paragraphe.has-text-align-center { text-align: left; }
}