您好,
我正在使用 Discourse 并尝试使用“横幅主题”功能创建可关闭的横幅。我的站点语言是波斯语(RTL - 右到左)。
我在主题的第一篇帖子中添加了带有行内样式的 HTML 内容,横幅显示正常,但我在横幅框内水平居中文本时遇到了困难。
问题:
横幅内的内容默认对齐到右侧。当尝试将其居中时,不能完美对齐,尤其是第一行文字相对于横幅内其他行或块内容略偏右。这种错位无论第一行的内容如何,都一直存在。
尝试居中的方法:
在帖子HTML内的主div容器上使用标准CSS:text-align: center;
结果:内容仍然右对齐。
在主div上使用 text-align: center !important;
结果:内容仍然保持右对齐。
在主div上使用已废弃的HTML align=“center” 属性
结果:这确实将内容向中心偏移,但第一行与后续行/块之间的对齐不完美,第一行相对于其他行略偏右。
简化内部HTML结构(例如,用br将多行文本合并为较少的段落)
结果:未解决内容块之间的对齐问题。
尝试手动对第一段/块添加负的margin-left
结果:未能有效地以一致的方式校正对齐。
在不同浏览器(Chrome, Firefox)中测试
结果:问题在所有浏览器中一致。
示例HTML结构(简化版):
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;">
第一行 / 文本块(例如标题)<br>
同一块中的第二行(例如副标题)
</p>
<p style="margin-top: 15px;">
另一个块(例如链接行)
</p>
</div>
(注意:这里使用了 align=“center”,因为 text-align: center 没有效果。)
观察/可能原因:
考虑到 text-align: center 无效,而 align=“center” 只部分起作用但导致内部对齐不完美,我怀疑是 Discourse 主题或核心横幅渲染中的CSS规则在干扰。左右两侧预留的用于关闭按钮(‘X’)的空间在RTL布局中可能也影响剩余内容区域的居中方式。
问题:
在使用“横幅主题”创建的可关闭横幅中,如何实现内容的完美水平居中?是否需要在主题自定义中添加特定CSS代码(需拥有管理员权限),以覆盖冲突的规则,并确保横幅内容块的精确居中?
非常感谢您的指导或见解!
谢谢。