Hola,
Estoy usando Discourse e intentando crear una bandera descartable usando la función “Tema de la Bandera”. El idioma de mi sitio es persa (RTL - De derecha a izquierda).
He añadido contenido HTML con estilos en línea en la primera publicación del tema, y la bandera aparece correctamente, pero estoy teniendo dificultades para centrar el contenido horizontalmente dentro del marco de la bandera.
Problema:
El contenido dentro de la bandera, por defecto, aparece alineado a la derecha. Cuando intento centrarlo, no se alinea perfectamente, y específicamente, la primera línea de texto aparece ligeramente desplazada a la derecha en comparación con otras líneas o bloques de contenido de la bandera. Esta desalineación persiste independientemente del contenido de la primera línea.
Intentos realizados para centrar:
Usando CSS estándar text-align: center; en el contenedor principal div dentro del HTML de la publicación.
Resultado: El contenido permaneció alineado a la derecha.
Usando text-align: center !important; en el div principal.
Resultado: El contenido aún permanecía alineado a la derecha.
Usando el atributo HTML obsoleto align=“center” en el div principal.
Resultado: Esto sí desplazó el contenido hacia el centro, pero la alineación entre la primera línea / bloque y las líneas / bloques subsiguientes fue imperfecta, con la primera línea ligeramente desplazada a la derecha en relación con las demás.
Simplificando la estructura HTML interna (por ejemplo, combinando líneas de texto en menos párrafos usando
).
Resultado: No resolvió el problema de alineación entre los bloques de contenido.
Intentando añadir un margen negativo a la izquierda manual en el primer párrafo / bloque.
Resultado: No corrigió eficazmente la alineación de manera consistente.
Probado en diferentes navegadores (Chrome, Firefox).
Resultado: El problema es consistente en todos los navegadores.
Ejemplo de estructura HTML utilizada en la publicación original (simplificada):
HTML<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;">
Primera línea / bloque de texto (por ejemplo, título)<br>
Segunda línea dentro del mismo bloque (por ejemplo, subtítulo)
</p>
<p style="margin-top: 15px;">
Otro bloque (por ejemplo, línea de enlace)
</p>
</div>
(Nota: Aquí se usa align=“center” porque text-align: center no tuvo efecto).
Observación / Causa sospechada:
Dado que text-align: center no hace nada, y align=“center” funciona parcialmente pero resulta en una alineación interna imperfecta, sospecho que hay alguna regla CSS dentro del tema de Discourse o en la renderización del banner que está interfiriendo. El espacio reservado para el botón de cierre (‘X’) en el lado izquierdo de la bandera en el diseño RTL también podría jugar un papel en cómo se centra el resto del contenido.
Pregunta:
¿Cuál es el método recomendado para lograr una centración horizontal perfecta del contenido dentro de una bandera descartable creada mediante “Tema de la Bandera” en un sitio RTL de Discourse? ¿Existe un fragmento CSS específico que deba añadirse a la personalización del tema (reconociendo que esto requiere privilegios de administrador) para anular correctamente reglas en conflicto y asegurar una centración precisa del bloque de contenido de la bandera?
¡Agradezco mucho cualquier orientación o idea!
¡Gracias.