Flexbox
שיעור 5 מתוך 9 בקורס איך למרכז div או טקסט באמצעות CSS של Coddy.
כנראה שהדרך הטובה ביותר למרכז div היא באמצעות Flexbox (או כל דבר אחר!)
Flexbox היא שיטה רספונסיבית, והיא אינה דורשת חישובי שוליים או מיקום.
כדי להשתמש ב-flexbox, הוסף ל-div ההורה את display: flex; — פעולה זו תהפוך את ה-div ההורה ל-flexbox. כדי למרכז את כל מה שנמצא בתוך ההורה, השתמש ב-align-items: center; וב-justify-content: center;
בסך הכול,
#parent {
display: flex;
align-items: center;
justify-content: center;
}שימו לב: אין צורך להוסיף דבר ל-div הילד!
אתגר
קלמרכזים את רכיב ה-div הפנימי באמצעות flexbox.
נסו בעצמכם
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="parent">
<div id="child"/>
</div>
</body>
</html>כל השיעורים ביחידה איך למרכז div או טקסט באמצעות CSS
1מבוא
מהו הקורס הזה?תרגלו בעצמכם: Web אונליין