مرحبًا،
أنا أستخدم Discourse وأحاول إنشاء لافتة قابلة للخصم باستخدام ميزة “موضوع اللافتة”. لغة موقعي هي الفارسية (من اليمين إلى اليسار - RTL).
لقد أضفت محتوى HTML مع أنماط مدمجة إلى أول منشور في الموضوع، وتظهر اللافتة بشكل صحيح، ولكنني أواجه صعوبة في محاذاة المحتوى مركزيًا أفقيًا داخل إطار اللافتة.
المشكلة:
يبدو المحتوى داخل اللافتة متجهًا إلى اليمين بشكل افتراضي. عند محاولة توسيطه، لا يتماشى بشكل مثالي، وسطر النص الأول يظهر بمحاذاة طفيفة للجانب الأيمن مقارنة بأسطر أو كتل المحتوى الأخرى داخل اللافتة. يستمر هذا الاختلال بغض النظر عن محتوى السطر الأول.
محاولات التوسيط:
استخدام الخاصية CSS العادية text-align: center; على حاوية div الأساسية داخل HTML المنشور.
النتيجة: ظل المحتوى محاذيًا لليمين.
استخدام text-align: center !important; على div الأساسية.
النتيجة: محتوى لا يزال محاذيًا لليمين.
استخدام سمة HTML القديمة align=“center” على div الأساسية.
النتيجة: هذا فعلاً حرك المحتوى نحو المركز، لكن المحاذاة بين السطر/الكتلة الأولى وما يليها كانت غير كاملة، حيث ظهر السطر الأول بمحاذاة طفيفة إلى اليمين بالنسبة للآخرين.
تبسيط الهيكل الداخلي لـ 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” يعمل جزئيًا لكنه يؤدي إلى محاذاة غير كاملة، أشتبه في وجود قاعدة CSS ضمن قالب Discourse أو في الت_Render_ الأصلي لللافتة تتداخل. ربما يلعب مكان تخصيص زر الإغلاق (‘X’) على الجانب الأيسر من اللافتة في نمط RTL دورًا في تحديد كيفية توسيط المحتوى المتبقي.
السؤال:
ما الطريقة الموصى بها لتحقيق توسيط أفقي كامل للمحتوى داخل لافتة يمكن إغلاقها تم إنشاؤها عبر “موضوع اللافتة” على موقع RTL بـ Discourse؟ هل هناك قطعة CSS محددة يجب إضافتها إلى تخصيص القالب (مع العلم أن ذلك يتطلب صلاحيات المسؤول) لتخطي القواعد المتضاربة وضمان توسيط دقيق لمحتوى اللافتة؟
أي إرشادات أو رؤى ستكون محل تقدير كبير!
شكرًا لك.