يساعدك هذا الدرس التطبيقي في إعداد نفسك لمشاركة طريقتك المفضّلة في التمركز حول خدمة مقارنة الأسعار (CSS).
يمكنك مراجعة مشاركة مدونتي بعنوان Centering in CSS (التمركز في 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 من القسم السابق. - نشر تغريدة بشأن المشكلة التي واجهتها وسأسلّط الضوء عليها مشاركة المدونة.