שלום לכם,
באשכול הזה אפרסם מאמרים נחמדים (לדעתי...) בנושאי CSS מעניינים, שפרסמתי בעבר בבלוג שלי (שאותו הפסקתי לתחזק לצערי מחוסר זמן... מקווה לחזור לכתוב בעתיד)
והפעם על יישור אנכי לאלמנטים ביחס לאלמנטים אחרים. קיימות סיטואציות שונות בה אנו רוצים ליישר אלמנטים, ולכל סיטואציה הפתרון/ות שלה.
1. יישור שורה אחת
הבעיה
נתחיל מהמצב הפשוט ביותר. יש לנו כפתור בגובה מסויים, ואמור להיות בו טקסט כלשהו. לדוגמא כפתור שליחה של טופס. אנו רוצים שהטקסט יהיה מיושר בתוך הכפתור.
הפתרון
אם נניח שגובה הכפתור הינו 40 פיקסלים, הרי שכל מה שנצטרך להוסיף זה הגדרה של line-height: 40px.
הסבר
ההגדרה של line-height מגדירה את גובה השורה של הטקסט הנתון. הטקסט תמיד יהיה מיושר בתוך גובה השורה שלו. לכן ברגע שהגדרנו את גובה השורה כגובה האלמנט – הטקסט יתיישר בגובה השורה וממילא בגובה האלמנט.
הערה בקטנה ישנם פונטים מסויימים, שבהם האותיות לא מיושרות למה שנקרא baseline - נקודת האמצע בגובה של השורה. טיפה מסובך להסביר את זה, אבל בסופו של דבר התוצאה היא שאם נגדיר את אותו גובה שורה כמו הפתרון שהוצע כאן - הטקסט לא יהיה מיושר, וכן אם ניישר טקסט לאייקון. זה קרה לי למשל באתר וריפון (http://verifone.co.il/). אם תלכדו בinspector את הכפתור על הבאנר, ניתן לראות שיש לו padding top קצת, בלי זה הטקסט לא מיושר טוב. באשמת מי שפיתח את הפונט... אבל עזבו, זה לעיתים ממש נדירות.
2. יישור מס' שורות בלתי ידוע
הבעיה
הפתרון של line-height מעשי רק כשיש לנו שורה אחת של תוכן. במידה ויש יותר משורה אחת שאמורות להיות ממורכזות באזור מסוים וניתן שם הגדרת line-height – השורה הראשונה תהיה ממורכזת, ואילו השניה תרד מתחת לאלמנט. כי גובה כל שורה יהיה כגובה האלמנט. מה נעשה אם כן כשיש לנו מס' שורות בלתי ידוע – פעם שורה, פעם שתיים ופעם יותר?
פתרון א'
ההגדרה vertical-align מקבלת שתי משמעויות שונות, בהתאם להגדרת הdisplay של הנושא אותה (אם התגובות שלכם תהינה חיוביות, אעלה בעז"ה פוסט נוסף שעוסק כולו בהגדרות ה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. וזאת מהסיבה שלdisplay table וtable-cell יש תופעות לוואי של הגדרות שאינן נתמכות, רוחב שאינו בשליטה ועוד. למה להסתבך אם יש דרך אחרת פשוטה, נקיה ושעובדת היטב?!
עד כאן להיום. אשמח לתגובות עד כמה היה המאמר ברור ויעיל
פורסם לראשונה בבלוג שלי
https://hanniessite.wordpress.com/2016/08/14/יישור-אנכי-לאלמנטים/
באשכול הזה אפרסם מאמרים נחמדים (לדעתי...) בנושאי CSS מעניינים, שפרסמתי בעבר בבלוג שלי (שאותו הפסקתי לתחזק לצערי מחוסר זמן... מקווה לחזור לכתוב בעתיד)
והפעם על יישור אנכי לאלמנטים ביחס לאלמנטים אחרים. קיימות סיטואציות שונות בה אנו רוצים ליישר אלמנטים, ולכל סיטואציה הפתרון/ות שלה.
1. יישור שורה אחת
הבעיה
נתחיל מהמצב הפשוט ביותר. יש לנו כפתור בגובה מסויים, ואמור להיות בו טקסט כלשהו. לדוגמא כפתור שליחה של טופס. אנו רוצים שהטקסט יהיה מיושר בתוך הכפתור.
אם נניח שגובה הכפתור הינו 40 פיקסלים, הרי שכל מה שנצטרך להוסיף זה הגדרה של line-height: 40px.
קוד:
.button{
height: 40px;
line-height: 40px;
}
ההגדרה של line-height מגדירה את גובה השורה של הטקסט הנתון. הטקסט תמיד יהיה מיושר בתוך גובה השורה שלו. לכן ברגע שהגדרנו את גובה השורה כגובה האלמנט – הטקסט יתיישר בגובה השורה וממילא בגובה האלמנט.
הערה בקטנה ישנם פונטים מסויימים, שבהם האותיות לא מיושרות למה שנקרא baseline - נקודת האמצע בגובה של השורה. טיפה מסובך להסביר את זה, אבל בסופו של דבר התוצאה היא שאם נגדיר את אותו גובה שורה כמו הפתרון שהוצע כאן - הטקסט לא יהיה מיושר, וכן אם ניישר טקסט לאייקון. זה קרה לי למשל באתר וריפון (http://verifone.co.il/). אם תלכדו בinspector את הכפתור על הבאנר, ניתן לראות שיש לו padding top קצת, בלי זה הטקסט לא מיושר טוב. באשמת מי שפיתח את הפונט... אבל עזבו, זה לעיתים ממש נדירות.
2. יישור מס' שורות בלתי ידוע
הבעיה
הפתרון של line-height מעשי רק כשיש לנו שורה אחת של תוכן. במידה ויש יותר משורה אחת שאמורות להיות ממורכזות באזור מסוים וניתן שם הגדרת line-height – השורה הראשונה תהיה ממורכזת, ואילו השניה תרד מתחת לאלמנט. כי גובה כל שורה יהיה כגובה האלמנט. מה נעשה אם כן כשיש לנו מס' שורות בלתי ידוע – פעם שורה, פעם שתיים ופעם יותר?
פתרון א'
- הוספת ההגדרה display: table לכפתור
- עטיפת הטקסט שבתוכו בתגית נוספת, לדוגמא <span>,
- ואז לתגית החדשה נוסיף display: table-cell; vertical-align: middle;
- לכפתור נוסיף אלמנט ריק: <span class="vertical-align-helper"></span>
- נעטוף את התוכן שצריך יישור <span>כאן יופיע הHTML של כל מה שצריך יישור. </span>
- הוספת הCSS הבא:
.vertical-align-helper{ display: inline-block; height: 100%; vertical-align: middle;{
.vertical-align-helper + * { display: inline-block; width: 99%; vertical-align: middle;} - אם כשמסיימים את כל זה התוכן שאמור היה להתיישר "בורח" אל מתחת האלמנט האב (בדוגמא שלנו – הכפתור) – יש להוסיף לאב את ההגדרה הבאה:font-size: 0px;
ההגדרה vertical-align מקבלת שתי משמעויות שונות, בהתאם להגדרת הdisplay של הנושא אותה (אם התגובות שלכם תהינה חיוביות, אעלה בעז"ה פוסט נוסף שעוסק כולו בהגדרות ה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% – כדי שלא יתפוס מאה אחוז של הרוחב, וזה כדי שלא ייפול למטה (הרי יש לנו אלמנט נוסף שגם הוא אמור לתפוס אי אלו פיקסלים)
ומה עדיף?
אם תשאלו לדעתי, עדיפה הדרך השניה. זו עם display: inline-block. וזאת מהסיבה שלdisplay table וtable-cell יש תופעות לוואי של הגדרות שאינן נתמכות, רוחב שאינו בשליטה ועוד. למה להסתבך אם יש דרך אחרת פשוטה, נקיה ושעובדת היטב?!
עד כאן להיום. אשמח לתגובות עד כמה היה המאמר ברור ויעיל
פורסם לראשונה בבלוג שלי
https://hanniessite.wordpress.com/2016/08/14/יישור-אנכי-לאלמנטים/
נערך לאחרונה ב: