יישור אנכי לאלמנטים

בפוסט זה נדון על יישור אנכי לאלמנטים ביחס לאלמנטים אחרים. קיימות סיטואציות שונות בה אנו רוצים ליישר אלמנטים, ולכל סיטואציה הפתרון/ות שלה.

יישור שורה אחת בכפתור

הבעיה

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

הפתרון

אם נניח שגובה הכפתור הינו 40 פיקסלים, הרי שכל מה שנצטרך להוסיף זה הגדרה של line-height: 40px.

.button{
   height: 40px;
   line-height: 40px;
}

הסבר

ההגדרה של line-height מגדירה את גובה השורה של הטקסט הנתון. הטקסט תמיד יהיה מיושר בתוך גובה השורה שלו. לכן ברגע שהגדרנו את גובה השורה כגובה האלמנט – הטקסט יתיישר בגובה השורה וממילא בגובה האלמנט.

יישור מס' שורות בלתי ידוע

הבעיה

הפתרון של line-height מעשי רק כשיש לנו שורה אחת של תוכן. במידה ויש יותר משורה אחת שאמורות להיות ממורכזות באזור מסוים וניתן שם הגדרת line-height – השורה הראשונה תהיה ממורכזת, ואילו השניה תרד מתחת לאלמנט. כי גובה כל שורה יהיה כגובה האלמנט. מה נעשה אם כן כשיש לנו מס' שורות בלתי ידוע – פעם שורה, פעם שתיים ופעם יותר?

פתרון א'

• הוספת ההגדרה display: table לכפתור
• עטיפת הטקסט שבתוכו בתגית נוספת, לדוגמא <span>,
• ואז לתגית החדשה נוסיף display: table-cell; vertical-align: middle;

פתרון ב'

• נשתמש בbefore של האלמנט האב (הכפתור בדוגמה שלנו)
• נעטוף את התוכן שצריך יישור <span>כאן יופיע הHTML של כל מה שצריך יישור. </span>
• הוספת הCSS הבא:
  button:before{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
button span {
display: inline-block;
width: 99%;
vertical-align: middle;
}
• אם כשמסיימים את כל זה התוכן שאמור היה להתיישר "בורח" אל מתחת האלמנט האב (בדוגמא שלנו – הכפתור) – יש להוסיף לאב את ההגדרה הבאה:font-size: 0px;

הסבר

ההגדרה vertical-align מקבלת שתי משמעויות שונות, בהתאם להגדרת הdisplayשל הנושא אותה.

הצורה הראשונה באה לידי בטוי בפתרון הראשון שנתנו. ברגע שיש לאלמנט display: table-cell או שברמת הHTML הוא מוגדר כ<td> – הרי שההגדרה של היישור מתייחסת באופן אוטומטי ליישור התוכן שלו בתוך הגובה שלו. כלומר, אם התוכן שלו תופס 20 פיקסלים והגובה הכולל שלו הוא 100 פיקסלים (אם בגלל הגדרת CSS ואם בגלל אלמנטים אחרים שלידו) – במידה וניתן לתא הזה vertical-align כלשהו – התוכן שלו  יתיישר בתוכו בהתאם להגדרה (top – התוכן יתיישר למעלה וכו').

בפתרון א' שלמעלה, הוספנו לכפתור הגדרת טבלה, ולאלמנט בתוכו, שמכיל את כל התוכן – הגדרת תא בטבלה. (הוספת האלמנט הזה  – כדי לתמוך בכל מצב). ברגע שהתוכן של הכפתור מוגדר כתוכן של תא בטבלה – הוא יהיה מיושר בהתאמה להגדרה שקיבל התא. בדוגמא שלנו – ימתרכז.

לעומת זאת כמעט בכל אפשרות display אחרת – לא התוכן הוא שמתיישר, אלא האלמנט עצמו מתיישר ביחס ל"אחים שלו", האלמנטים שנמצאים באותה היררכיה שלו, תחת אותו "אב". המשמעות המעשית של זה, שלא מספיק לתת לכפתור vertical-align: middle כדי שכתוכן שלו יתיישר בתוכן, אלא התוכן צריך להיות מיושר ביחס למשהו אחר. לצורך זה הוספנו את האלמנט הריק – vertical-align-helper (ניתן כמובן לתת לו איזה שם שמתחשק). לאלמנט הזה הגדרנו שגובהו יהיה זהה לגובה האב (בדוגמא שלנו- לגובה הכפתור). אחר כך עטפנו את התוכן בspan (ניתן לעטוף גם בdiv אם רוצים. כאן היה לי בפנים רק טקסט, לכן עטפתי רק בspan), והגדרנו שהאלמנט שאחרי ה"עוזר" שלנו יקבל את ההגדרות הבאות:

• display: inline-block – כדי שיהיה מסוגל להיות מיושר
• vertical-align: middle – כדי שיהיה מיושר לאמצע
• width: 99% – כדי שלא יתפוס מאה אחוז של הרוחב, וזה כדי שלא ייפול למטה (הרי יש לנו אלמנט נוסף שגם הוא אמור לתפוס אי אלו פיקסלים)

הוספת ההגדרה של font size 0 לאב נועדה גם היא למנוע נפילה של האלמנט. הסבר על זה יורחב בפוסט אחר.

ומה עדיף?

אם תשאלו לדעתי, עדיפה הדרך השניה. זו עם display: inline-block. וזאת מהסיבה שלdisplay table וtable-cell יש תופעות לוואי של הגדרות שאינן נתמכות, רוחב שאינו בשליטה ועוד. למה להסתבך אם יש דרך אחרת פשוטה, נקיה ושעובדת היטב?!

עד כאן להיום. אשמח לתגובות עד כמה היה המאמר ברור ויעיל 🙂