افضل مرجع مقدس ل css

 افضل مرجع قدس ل css

نشر كريس كوير مؤخراً شجرة قرارات على موقعه الإكتروني، CSS Tricks، لشرح العديد من الطرق المستخدمة لتمركز الأشياء أفقياً وعامودياً باستخدام الـ CSS. ولكلّ من هذه الطرق مخاوفها إذا استخدمت بمفردهاا، أما إذا تم الجمع بينها فذلك يجعلها أداة تمركز مثالية تعمل عبر المتصفحات إبتداءً من IE8 ومايليه و بشكل موثوق.

وهذه هيا الطريق للوصل الى هذا الموضوع :

تابع معنا

إذا كنت ستقوم بتصميم موقع متجاوب فإنك ستحدد أحجام العناصر بناءً على النسب المئوية. فلنأخذ عنصراً  كالـ (.container) على سبيل المثال:

للتأكد من أن هذا العنصر الاحتوائي يمتد بشكلٍ مناسب يجب أن نعيّن
 html, body { width: 100%; height: 100%; }.

تحويل الجداول

الآن، وبعد الخطوة الأولى، سنحصل داخل الـ (.container) على تمركز عامودي بشكل جدولٍى عادي، وهذا ما يجعل العناصر على مستوى مربع عادي كأنها خلايا(مربعات) كالجدول، مما يمنحنا تمركزاً عامودياً:

سوف نقوم بإضافة عنصر يتمركز بشكل أفقي:

بإمكانك أن تضع أي شيء داخل هذا العنصر، بما في ذلك مربعات نصية ديناميكية الارتفاع، أو عناصر تحتىوى على تمركز مطلق.

تعديلات التمركز 

لتغيير التمركز الأفقي للعنصر عليك بتعديل خاصية الـ (text-align) للـ (.inner). ولتغيير التمركز العامودي للعنصر، عليك بتعديل خاصية الـ (vertical-align) للـ (.inner).


نتعلم من هذا: 

قد يبدو هذا المثال معقداً بعض الشيء، لكنه لا يتألف إلا من ثلاثة أجزاء تتبع لـ(div) وهي (.outer) و (.inner) و (.centered) كما أن التصميم لهذه الأجزاء ثابت، لذلك يمكنك إستخدامه في مشاريع الـ CSS لديك باستمرار دون الشعور بالقلق تجاهه


إن هذه الطريقة تحتوي على عناصر إضافية زيادةً على طرق التمركز الشائعة، وهي خالية من أي مشاكل. لذا فأنا آمل أن تصبح هذه الطريقة هي الطريقة المعيارية المعتمدة للتخلص من مشاكل التمركز في CSS.