מדריך 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

 

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים

 

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

 

= 7 + 3