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

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

הבעיה

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

הדגמת כפתור שמכיל שורה אחת לצורך יישור אנכי

הפתרון

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

.button{

    height: 40px;

    line-height: 40px;

}

הסבר

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

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

הבעיה

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

דוגמא לכפתורים עם תוכן באורך משתנה וגובה קבוע לצורך יישור אנכי

פתרון א'

 

פתרון ב'

הסבר

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

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

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

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

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

ומה עדיף?

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

 

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

 

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *