درس تطبيقي حول الترميز: التوسيط في CSS

يساعدك هذا الدرس التطبيقي في إعداد نفسك لمشاركة طريقتك المفضّلة في التمركز حول خدمة مقارنة الأسعار (CSS).

يمكنك مراجعة مشاركة مدونتي بعنوان Centering in CSS (التمركز في CSS) للتعرّف على 5 طرقي المفضلة للتمركز في CSS. أو شاهد هذا الفيديو!

ضبط إعدادات الجهاز

  1. انقر على إنشاء ريمكس لتعديل لجعل المشروع قابلاً للتعديل.
  2. فتح "app/index.html"
  3. في line 23، استبدِل /* your centering CSS here /* بخدمة CSS.
  4. (اختياري) أدخِل اسمًا لتقنية التوسيط واستبدِل النص في <h1>.

الأنماط

  1. إنشاء ملف جديد في المجلد "app/css/"
  2. أنشئ أداة اختيار لتثبيت حل التوسيط، مثل .turbo-center أو [floaty-mcfloat]
  3. داخل هذا المحدد الجديد، اكتب تقنية التوسيط (لا تتردد في البحث عن الأخرى في app/css/ كأمثلة)
  4. (اختياري) اكتب بعض "أنماط الدعم" حتى نتمكن من معرفة الأطفال الذين يحتاجون أنماط لدعم التمركز
  5. افتح app/css/index.css واستيراد ملفك الجديد في الأسفل

اربط كل شيء

  1. فتح "app/index.html" مرة أخرى
  2. ابحث عن "<article>" وأدرِجه في أداة الاختيار المخصّصة التي أنشأتها في الخطوة رقم 2 من القسم السابق.
  3. نشر تغريدة بشأن المشكلة التي واجهتها وسأسلّط الضوء عليها مشاركة المدونة.