افضل مرجع قدس ل 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.