Adam Argyle
يهدف هذا الدرس التطبيقي حول الترميز إلى مساعدتك في مشاركة طريقتك المفضّلة لتوسيط العناصر في 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 من القسم السابق. - يمكنك مراسلتي على Twitter بشأن تطبيقك على Glitch وسأعرضه في مشاركة المدوّنة.