Codelab: מרכוז ב-CSS

אדם ארגייל

בשיעור הזה תלמדו איך לשתף ולהציג את הדרך המועדפת עליכם למרכז ב-CSS.

קראו את הפוסט בבלוג שלי Centering in 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. שלחו לי ציוץ את הגליץ' שלכם ואני אפרסם אותו בפוסט בבלוג!