Bonjour,
Je utilise Discourse et j’essaie de créer une bannière dismissible en utilisant la fonction “Topic de bannière”. La langue de mon site est persan (RTL - de droite à gauche).
J’ai ajouté du contenu HTML avec des styles en ligne dans le premier message du sujet, et la bannière apparaît correctement, mais je rencontre des difficultés pour centrer horizontalement le contenu dans le cadre de la bannière.
Problème :
Le contenu à l’intérieur de la bannière, par défaut, semble aligné à droite. Lors de la tentative de le centrer, il ne s’aligne pas parfaitement, et en particulier, la première ligne de texte apparaît légèrement décalée vers la droite par rapport aux autres lignes ou blocs de contenu dans la bannière. Ce mauvais alignement persiste indépendamment du contenu de la première ligne.
Tentatives pour centrer :
Utiliser le CSS standard text-align: center; sur le conteneur div principal dans le HTML du message.
Résultat : le contenu est resté aligné à droite.
Utiliser text-align: center !important; sur le div principal.
Résultat : le contenu est toujours aligné à droite.
Utiliser l’attribut HTML déprécié align=“center” sur le div principal.
Résultat : cela a déplacé le contenu vers le centre, mais l’alignement entre la première ligne/bloc et les lignes/blocs suivants était imparfait, avec la première ligne apparaissant légèrement décalée vers la droite par rapport aux autres.
Simplifier la structure HTML interne (par ex., en combinant les lignes de texte en moins de paragraphes avec
).
Résultat : cela n’a pas résolu le problème d’alignement entre les blocs de contenu.
Essayer d’ajouter une marge négative manuelle (margin-left: -Xpx) à la premier paragraphe/bloc.
Résultat : cela n’a pas corrigé efficacement l’alignement de manière cohérente.
Tester dans différents navigateurs (Chrome, Firefox).
Résultat : le problème est cohérent dans tous les navigateurs.
Exemple de structure HTML utilisée dans le message d’origine (simplifiée) :
<div align="center" style="background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 5px; padding: 10px;">
<p style="font-size: 1.1em; font-weight: bold; color: #333;">
Première ligne / bloc de texte (par ex., titre)<br>
Deuxième ligne dans le même bloc (par ex., sous-titre)
</p>
<p style="margin-top: 15px;">
Un autre bloc (par ex., ligne de lien)
</p>
</div>
(Note : utilisation de align=“center” ici parce que text-align: center n’avait pas d’effet).
Observation / Cause supposée :
Étant donné que text-align: center ne fait rien, et que align=“center” fonctionne partiellement mais donne un mauvais alignement interne, je suspecte qu’il y a une règle CSS dans le thème Discourse ou dans la mise en page du banner qui interfère. L’espace réservé pour le bouton de dismissal (‘X’) à gauche de la bannière en RTL pourrait également jouer un rôle dans la manière dont la zone de contenu restante est centrée.
Question :
Quelle est la méthode recommandée pour obtenir un centrage horizontal parfait du contenu dans une bannière dismissible créée via “Topic de bannière” sur un site Discourse RTL ? Existe-t-il un code CSS spécifique à ajouter dans la personnalisation du thème (en reconnaissant que cela requiert des privilèges administratifs) pour surcharger correctement les règles conflictuelles et assurer un centrage précis du bloc de contenu de la bannière ?
Toute guidance ou insight serait grandement appréciée !
Merci.