إن توسيط عنصر باستخدام CSS ليس بالأمر السهل، فنفس إعداد توسيط CSS الصالح يتصرف بشكل مختلف في المتصفحات المختلفة. دعونا أولاً نلقي نظرة على عدة طرق شائعة في CSS لتوسيط العناصر أفقيًا.
1. استخدم الهوامش التلقائية لتحقيق التوسيط الطريقة المفضلة لتوسيط عنصر أفقيًا في CSS هي استخدام سمة الهامش - فقط قم بتعيين سمات الهامش الأيسر والهامش الأيمن للعنصر على تلقائي. في الاستخدام الفعلي، يمكننا إنشاء div الذي يعمل كحاوية لهذه العناصر التي يجب توسيطها. شيء واحد يجب ملاحظته بشكل خاص هو أنه يجب تحديد العرض للحاوية:
div#container {
Margin-left: auto;
Margin
-
right: auto
;
عرض بشكل طبيعي. لكن لسوء الحظ، في الإصدارات الأقل من IE، لا يحقق هذا الإعداد تأثير التوسيط. لذلك، إذا كنت تريد استخدام هذه الطريقة في المشاريع الفعلية، فيجب عليك التأكد من أن إصدار متصفح IE الخاص بالمستخدم لا يقل عن 6.0.
على الرغم من أن الدعم أقل من المثالي، إلا أن معظم المصممين ينصحون باستخدام هذا الأسلوب كلما أمكن ذلك. تعتبر هذه الطريقة أيضًا هي الأصح والأكثر منطقية بين الطرق المختلفة لتحقيق التمركز الأفقي للعناصر باستخدام CSS.
2. استخدم محاذاة النص لتحقيق التوسيط هناك طريقة أخرى لتحقيق توسيط العناصر وهي استخدام سمة محاذاة النص. يعد هذا الأسلوب بمثابة اختراق كامل، ولكنه متوافق مع معظم المتصفحات، لذا فهو ضروري بشكل طبيعي في بعض الحالات.
سبب تسميتها بالاختراق هو أن هذه الطريقة لا تطبق سمة النص على النص، بل على العنصر الذي هو الحاوية. وهذا أيضًا يخلق عملاً إضافيًا لنا. بعد إنشاء الأقسام اللازمة للتخطيط، نحتاج إلى تطبيق خاصية محاذاة النص على النص وفقًا للكود التالي:
body{
text-align:center
}
هل ستكون هناك أي مشاكل بعد ذلك؟ سيتم عرض جميع العناصر المتحدرة من الجسم في المنتصف.
لذلك، نحتاج إلى كتابة قاعدة أخرى لإعادة النص إلى المحاذاة الافتراضية لليسار:
p {
محاذاة النص:يسار؛
}
يمكنك أن تتخيل أن هذه القاعدة الإضافية ستسبب بعض الإزعاج. بالإضافة إلى ذلك، فإن المتصفحات التي تلتزم تمامًا بالمعايير لن تغير موضع الحاوية، ولكنها ستقوم فقط بتوسيط النص داخلها.
3. استخدم الهوامش التلقائية ومحاذاة النص معًا نظرًا لأن أسلوب محاذاة النص والتوسيط يتمتع بتوافق جيد مع الإصدارات السابقة، كما أن أسلوب الهامش التلقائي مدعوم أيضًا من قبل معظم المتصفحات المعاصرة، يستخدم العديد من المصممين مزيجًا من الاثنين لإنشاء تأثيرات التوسيط. احصل على الحد الأقصى من الدعم عبر المستعرضات:
body {
محاذاة النص: مركز؛
}
#حاوية {
الهامش الأيسر: تلقائي؛
الهامش الأيمن: تلقائي؛
الحدود: 1 بكسل أحمر خالص؛
العرض: 168 بكسل؛
محاذاة النص: يسار
}
لكن هذا لا يزال اختراقًا، وهو ليس مثاليًا بأي حال من الأحوال. ما زلنا بحاجة إلى كتابة قواعد إضافية لتوسيط النص في الحاوية، ولكنها على الأقل تبدو جيدة عبر المتصفحات.
4. حل الهامش السلبي حل الهامش السلبي هو أكثر بكثير من مجرد إضافة هوامش سلبية إلى العناصر. تتطلب هذه الطريقة استخدام كل من الموضع المطلق والهوامش السلبية.
فيما يلي طريقة التنفيذ المحددة لهذا الحل. أولاً، قم بإنشاء حاوية تحتوي على العنصر المركزي، ثم ضعه تمامًا بنسبة 50% من الحافة اليسرى للصفحة. بهذه الطريقة، سيبدأ الهامش الأيسر للحاوية بنسبة 50% من عرض الصفحة.
ثم قم بتعيين قيمة الهامش الأيسر للحاوية إلى نصف سالب من عرض الحاوية. سيؤدي هذا إلى تثبيت الحاوية عند نقطة المنتصف الأفقية للصفحة.
#حاوية {
الخلفية: #ffc url(mid.jpg) مركز التكرار؛
الموقف: مطلق؛
اليسار: 50%؛
العرض: 760 بكسل؛
الهامش الأيسر: -380 بكسل؛
}
انظر، ليس هناك الاختراق! على الرغم من أن هذا ليس الحل المفضل، إلا أنه أسلوب جيد ويعمل بشكل جيد للغاية - حتى أنه يعمل في Netscape Navigator 4.x دون أي مشاكل، وهو ما يثير الدهشة، أليس كذلك؟ لذا، إذا كنت تريد دعمًا أوسع للمتصفح، فستكون هذه الطريقة هي الخيار الأفضل.