Ciao,
Sto utilizzando Discourse e cercando di creare un banner dismissibile utilizzando la funzione “Banner Topic”. La lingua del mio sito è persiana (RTL - Da destra a sinistra).
Ho aggiunto contenuto HTML con stili inline nel primo post del topic, e il banner appare correttamente, ma sto incontrando difficoltà a centrare orizzontalmente il contenuto all’interno del frame del banner.
Problema:
Il contenuto all’interno del banner, di default, sembra allineato a destra. Quando tento di centrarlo, non si allinea perfettamente, e in particolare la prima riga di testo appare leggermente spostata a destra rispetto ad altre righe o blocchi di contenuto all’interno del banner. Questo disallineamento persiste indipendentemente dal contenuto della prima riga.
Tentativi fatti per centrato:
Usando il CSS standard text-align: center; sul contenitore principale del div all’interno dell’HTML del post.
Risultato: il contenuto è rimasto allineato a destra.
Usando text-align: center !important; sul div principale.
Risultato: il contenuto è ancora rimasto allineato a destra.
Usando l’attributo HTML deprecato align=“center” sul div principale.
Risultato: questo spostava il contenuto verso il centro, ma l’allineamento tra la prima linea/blocco e le altre righe/blocchi era imperfetto, con la prima riga leggermente spostata a destra rispetto alle altre.
Semplificando la struttura HTML interna (ad esempio, combinando le righe di testo in meno paragrafi usando
).
Risultato: non ha risolto il problema di allineamento tra i blocchi di contenuto.
Tentando di aggiungere un margine negativo manuale-left al primo paragrafo/blocco.
Risultato: non ha correttamente corretto l’allineamento in modo coerente.
Testato su diversi browser (Chrome, Firefox).
Risultato: il problema è coerente tra i browser.
Esempio di struttura HTML usata nel post originario (semplificata):
<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;">
Prima riga / blocco di testo (es. Titolo)<br>
Seconda riga dello stesso blocco (es. Sottotitolo)
</p>
<p style="margin-top: 15px;">
Un altro blocco (es. linea di collegamento)
</p>
</div>
(Nota: qui si utilizza align=“center” perché text-align: center non ha effetto).
Osservazione / Ipotesi di causa:
Dato che text-align: center non fa nulla, e align=“center” funziona solo parzialmente ma provoca allineamenti interni imperfetti, sospetto che ci sia una regola CSS all’interno del tema Discourse o nel rendering del banner core che interferisce. Lo spazio riservato per il pulsante di chiusura (‘X’) sul lato sinistro del banner in layout RTL potrebbe anche influenzare il modo in cui viene centrato il contenuto residuo.
Domanda:
Qual è il metodo raccomandato per ottenere un centramento orizzontale perfetto del contenuto all’interno di un banner dismissibile creato tramite “Banner Topic” su un sito Discourse RTL? C’è uno specifico snippet CSS da aggiungere alla personalizzazione del tema (riconoscendo che richiede privilegi di amministratore) per sovrascrivere correttamente le regole in conflitto e garantire un allineamento preciso del contenuto del banner?
Qualsiasi guida o suggerimento sarebbe molto apprezzato!
Grazie.