إن توسيط عنصر باستخدام CSS ليس بالأمر السهل. يتصرف نفس إعداد توسيط CSS بشكل مختلف في المتصفحات المختلفة. تقدم هذه المقالة عدة طرق شائعة في CSS لتوسيط العناصر أفقيًا.
1. استخدم الهوامش التلقائية لتحقيق التوسيط
الطريقة المفضلة لتوسيط عنصر أفقيًا في CSS هي استخدام سمة الهامش - فقط قم بتعيين سمات الهامش الأيسر والهامش الأيمن للعنصر على تلقائي. في الاستخدام الفعلي، يمكننا إنشاء div الذي يعمل كحاوية لهذه العناصر التي يجب توسيطها. شيء واحد يجب ملاحظته بشكل خاص هو أنه يجب تحديد العرض للحاوية:
تعمل هذه الطريقة بشكل جيد جدًا في معظم المتصفحات السائدة، وحتى متصفح IE6 على نظام التشغيل Windows يمكنه العرض بشكل طبيعي في وضع التوافق القياسي الخاص به. لكن لسوء الحظ، في الإصدارات الأقل من IE، لا يحقق هذا الإعداد تأثير التوسيط. لذلك، إذا كنت تريد استخدام هذه الطريقة في المشاريع الفعلية، فيجب عليك التأكد من أن إصدار متصفح IE الخاص بالمستخدم لا يقل عن 6.0.
على الرغم من أن الدعم أقل من المثالي، إلا أن معظم المصممين ينصحون باستخدام هذا الأسلوب كلما أمكن ذلك. تعتبر هذه الطريقة أيضًا هي الأصح والأكثر منطقية بين الطرق المختلفة لتحقيق التمركز الأفقي للعناصر باستخدام CSS.
2. استخدم محاذاة النص لتحقيق التوسيط
هناك طريقة أخرى لتحقيق توسيط العناصر وهي استخدام سمة محاذاة النص. يعد هذا الأسلوب بمثابة اختراق كامل، ولكنه متوافق مع معظم المتصفحات، لذا فهو ضروري بشكل طبيعي في بعض الحالات.
سبب تسميتها بالاختراق هو أن هذه الطريقة لا تطبق سمة النص على النص، بل على العنصر الذي هو الحاوية. وهذا أيضًا يخلق عملاً إضافيًا لنا. بعد إنشاء الأقسام اللازمة للتخطيط، نحتاج إلى تطبيق خاصية محاذاة النص على النص وفقًا للكود التالي:
هل ستكون هناك أي مشاكل لاحقًا؟ سيتم عرض جميع عناصر الجسم المتفرعة في المنتصف.
لذلك، نحتاج إلى كتابة قاعدة أخرى لإعادة النص إلى المحاذاة الافتراضية لليسار:
يمكنك أن تتخيل أن هذه القاعدة الإضافية ستسبب بعض الإزعاج. بالإضافة إلى ذلك، فإن المتصفحات التي تلتزم تمامًا بالمعايير لن تغير موضع الحاوية، ولكنها ستقوم فقط بتوسيط النص داخلها.
3. استخدم الهوامش التلقائية ومحاذاة النص معًا
نظرًا لأن أسلوب محاذاة النص والتوسيط يتمتع بتوافق جيد مع الإصدارات السابقة، كما أن أسلوب الهامش التلقائي مدعوم أيضًا من قبل معظم المتصفحات المعاصرة، يستخدم العديد من المصممين مزيجًا من الاثنين لإنشاء تأثيرات التوسيط. الحصول على الحد الأقصى من الدعم عبر المتصفحات:
لكن هذا لا يزال اختراقًا، وهو ليس مثاليًا بأي حال من الأحوال. ما زلنا بحاجة إلى كتابة قواعد إضافية لتوسيط النص في الحاوية، ولكنها على الأقل تبدو جيدة عبر المتصفحات.
4. حل الهامش السلبي
حل الهامش السلبي هو أكثر بكثير من مجرد إضافة هوامش سلبية إلى العناصر. تتطلب هذه الطريقة استخدام كل من الموضع المطلق والهوامش السلبية.
فيما يلي طريقة التنفيذ المحددة لهذا الحل. أولاً، قم بإنشاء حاوية تحتوي على العنصر المركزي، ثم ضعه تمامًا بنسبة 50% من الحافة اليسرى للصفحة. بهذه الطريقة، سيبدأ الهامش الأيسر للحاوية بنسبة 50% من عرض الصفحة.
ثم قم بتعيين قيمة الهامش الأيسر للحاوية إلى نصف سالب من عرض الحاوية. سيؤدي هذا إلى تثبيت الحاوية عند نقطة المنتصف الأفقية للصفحة.
وعلى الرغم من أن هذا ليس الحل المفضل، إلا أنه نهج جيد وله نطاق واسع من التطبيقات.