آدم أرجيل
يساعدك هذا الدرس التطبيقي حول الترميز على مشاركة وعرض طريقتك المفضّلة في التمركز في CSS.
يمكنك الاطّلاع على مشاركة المدونة Centering in CSS للتعرّف على 5 من طُرقي المفضّلة للتوسيط في CSS. أو شاهد هذا الفيديو!
الإعداد
- انقر على إنشاء ريمكس لتعديله ليصبح المشروع قابلاً للتعديل.
- فتح "
app/index.html" - في
line 23، يمكنك استبدال/* your centering CSS here /*بخدمة CSS. - (اختياري) تسمية أسلوب التوسيط واستبدال النص في
<h1>
الأنماط
- إنشاء ملف جديد في مجلد "
app/css/" - إنشاء أداة اختيار لتثبيت حلّ التوسيط، مثل
.turbo-centerأو[floaty-mcfloat] - ضمن أداة الاختيار الجديدة هذه، اكتب أسلوب التوسيط (لا تتردد في الاطّلاع على الطريقة الأخرى في
app/css/كأمثلة) - (اختياري) اكتب بعض "أنماط الدعم" حتى نتمكن من معرفة الأطفال الذين يحتاجون إلى أنماط لدعم التوسيط
- فتح
app/css/index.cssواستيراد الملف الجديد في أسفل الصفحة
اربط كل شيء
- فتح "
app/index.html" مرة أخرى - ابحث عن
<article>وامنحه أداة الاختيار المخصّصة التي أنشأتها في الخطوة رقم 2 من القسم السابق. - يُرجى نشر تغريدة عن تأثير Glitch وسأعرضها في مشاركة المدونة.