Hallo,
ich verwende Discourse und versuche, mit der Funktion “Banner Topic” ein schließbares Banner zu erstellen. Die Sprache meiner Seite ist Persisch (RTL - Recht nach links).
Ich habe HTML-Inhalte mit Inline-Stilen in den ersten Beitrag des Themas eingefügt, und das Banner erscheint korrekt, aber ich habe Schwierigkeiten, den Inhalt horizontal innerhalb des Bannerrahmens zu zentrieren.
Problem:
Der Inhalt im Banner erscheint standardmäßig rechtsbündig. Wenn ich versuche, ihn zu zentrieren, ist die Ausrichtung nicht genau, insbesondere erscheint die erste Textzeile leicht nach rechts versetzt im Vergleich zu anderen Zeilen oder Blöcken im Banner. Diese Fehlausrichtung besteht unabhängig vom Inhalt der ersten Zeile.
Versuche zur Zentrierung:
Verwendung von standardmäßigem CSS text-align: center; im Haupt-div-Container innerhalb des HTMLs des Beitrags.
Ergebnis: Der Inhalt blieb rechtsbündig.
Verwendung von text-align: center !important; im Haupt-div.
Ergebnis: Der Inhalt blieb immer noch rechtsbündig.
Verwendung des veralteten HTML-Attributs align=“center” am Haupt-div.
Ergebnis: Dies verschob den Inhalt zum Zentrum, aber die Ausrichtung zwischen der ersten Zeile/Block und den folgenden Zeilen/Blöcken war unvollkommen, die erste Zeile erschien leicht nach rechts verschoben im Vergleich zu den anderen.
Vereinfachung der internen HTML-Struktur (z.B. Zusammenfassung der Textzeilen in weniger Absätzen mit <br>).
Ergebnis: Das Zentrierungsproblem zwischen den Inhaltblöcken wurde nicht behoben.
Versuch, manuell eine negative margin-left bei dem ersten Absatz/Block hinzuzufügen.
Ergebnis: Die Ausrichtung wurde nicht konsistent korrigiert.
Getestet in verschiedenen Browsern (Chrome, Firefox).
Ergebnis: Das Problem ist browserübergreifend konsistent.
Beispiel-HTML-Struktur, die im Ursprungspost verwendet wurde (vereinfacht):
<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;">
Erste Zeile / Textblock (z.B. Titel)<br>
Zweite Zeile im selben Block (z.B. Untertitel)
</p>
<p style="margin-top: 15px;">
Ein weiterer Block (z.B. Linkzeile)
</p>
</div>
(Wobei hier align="center" verwendet wurde, da text-align: center; keine Wirkung zeigte).
Beobachtung / Vermutete Ursache:
Da text-align: center; keine Wirkung zeigt und align="center"" nur teilweise funktioniert, aber zu unvollkommener interner Ausrichtung führt, vermute ich, dass eine CSS-Regel innerhalb des Discourse-Theme oder des Kern-Banner-Renderings stört. Der Raum für den Schließen-Button (‘X’) auf der linken Seite im RTL-Layout könnte ebenfalls eine Rolle bei der Feinjustierung des Inhaltsbereichs spielen.
Frage:
Was ist die empfohlene Methode, um eine perfekte horizontale Zentrierung des Inhalts innerhalb eines schließbaren Banners, das über “Banner Topic” auf einer RTL-Discourse-Seite erstellt wurde, zu erreichen? Gibt es einen bestimmten CSS-Code, der in die Theme-Anpassung eingefügt werden muss (unter Berücksichtigung, dass dies Admin-Rechte erfordert), um widersprüchliche Regeln zu überschreiben und eine präzise Zentrierung des Bannerinhalts zu gewährleisten?
Ich bin für jede Anleitung oder Einsicht sehr dankbar!
Vielen Dank.