Adam Argyle
בשיעור הזה תלמדו איך לשתף ולהציג את הדרך המועדפת עליכם למרכוז ב-CSS.
בפוסט בבלוג שלי Centering in CSS (מיקום במרכז באמצעות CSS) מוסבר על 5 מהדרכים המועדפות עליי למרכוז באמצעות CSS. אפשר גם לצפות בסרטון הזה.
הגדרה
- לוחצים על Remix to Edit כדי להפוך את הפרויקט לעריכה.
- פתיחה של
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 שלכם ואציג אותו בפוסט בבלוג.