こんにちは、
私はDiscourseを使用して、「Banner Topic」機能を使った閉じられるバナーを作成しようとしています。私のサイトの言語はペルシア語(RTL - 右から左)です。
最初の投稿にインラインスタイル付きのHTMLコンテンツを追加したところ、バナーは正しく表示されますが、バナー枠内のコンテンツを水平方向に中央揃えにするのに苦労しています。
問題点:
バナー内部のコンテンツは、デフォルトでは右揃えになっています。中央に配置しようとしても、完全に揃わず、特に最初の一行のテキストが他の行やブロックと比べてやや右寄りに見えます。このズレは、最初の行の内容に関係なく続きます。
中央揃えの試み:
メインのdivコンテナに対してスタンダードなCSSのtext-align: center;を使用。
結果:内容は依然として右揃えのまま。
!important付きのtext-align: center;をメインのdivに適用。
結果:内容は依然として右揃えのまま。
deprecatedなHTMLのalign="center"属性をメインdivに使用。
結果:これはコンテンツを中央に動かしましたが、最初の行やブロックと他の行の整列が不完全で、最初の行がやや右寄りに見えました。
内部HTML構造を簡素化(例:text linesを少ない段落にまとめるbrの使用)
結果:コンテンツブロック間の整列問題は解決しませんでした。
手動で負のマージン-leftを最初の段落/ブロックに適用。
結果:一貫して整列を修正できませんでした。
異なるブラウザ(Chrome、Firefox)でテスト。
結果:この問題はブラウザ共通で再現されます。
例として、投稿の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>
同じブロック内の2行目(例:サブタイトル)
</p>
<p style="margin-top: 15px;">
別のブロック(例:リンク行)
</p>
</div>
(例:text-align: centerが効果がなかったのでalign="center"を使用)
観察 / 推測される原因:
text-align: centerが機能せず、align="center"が部分的に機能しても内部の整列が不完全であることから、Discourseテーマやコアのバナー描画においてCSSルールが干渉している可能性があります。RTLレイアウトでは、バナー左側の閉じるボタン(「X」)のスペースも関係している可能性があります。
質問:
RTLのDiscourseサイトで作成された閉じられるバナー内の内容を完全に水平に中央揃えにする推奨方法は何ですか? 管理者権限が必要ですが、テーマのカスタマイズに追加すべき特定のCSSスニペットはありますか? 競合するルールを正しく上書きし、バナー内容ブロックを正確に中央揃えにするための方法をご教示ください。どうぞよろしくお願いいたします!