נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

מדריך CSS: יישור אלמנטים בדף בציר האנכי

מחבר:
בתאריך:

אחרי שבמדריך הקודם למדנו כיצד למרכז אלמנטים בדף בציר האופקי (לרוחב הדף), במדריך זה נסביר כיצד למרכז אלמנטים בציר האנכי (בגובה).

 

כיצד למרכז טקסט?

כדי למרכז טקסט צריך שגובה השורה (line-height) וגובה האלמנט (height) יהיו שווים.

.center-text-vertically {
    height: 80px;
    line-height: 80px;
    white-space: nowrap;
    margin: 0;
    padding: 0;
}

white-space: nowrap שומר את הטקסט בשורה אחת.

וזו התוצאה:

פסקה ממורכזת בגובה

 

כיצד למרכז טקסט שיש לו יותר משורה אחת?

ניתן לבצע זאת באמצעות flex-box ממש בקלות. את ההורה צריך להגדיר כ-flex.

div.parent{
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 150px;
}

p.child {
  margin:0;
}

וזו התוצאה:

פסקה ממורכזת בגובה
עם יותר משורה אחת

 

 

כיצד למרכז אלמנט (דיב, תמונה) שיודעים מה הגובה שלו?

מגדירים את ההורה באמצעות position: relative. ואת האלמנט הילד (דיב, תמונה וכיו"ב) ממקמים באמצעות position: absolute, ואת ה margin-top מחשבים לפי מחצית מגובה האלמנט. לדוגמה, אם גובה האלמנט 80 פיקסלים, אז margin-top: -40px בדיוק חצי.

div.parent {
   position: relative;
   box-sizing: border-box;
}
img.child {
  position: absolute;
  top: 50%;
  height: 80px;
  margin-top: -40px; 
}

והתוצאה:

כיצד למרכז אלמנטים בדף באמצעות CSS

 

כיצד למרכז אלמנט (דיב, תמונה) שלא יודעים מה הגובה שלו?

את האלמנט ההורה נגדיר באמצעות position: relative, מה שמאפשר למקם את האלמנט הילד בתוכו באמצעות position: absolute.

div.parent {
  position: relative;
}
div.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
 

 

לכל מדריכי ה-CSS

הוסף תגובה חדשה

 

= 4 + 2