Dev-Time

מרכוז אלמנטים – יותר פשוט ממה שחשבתם

בכתבה זו אני הולך להציג שיטות שונות כיצד למרכז אלמנטים.

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

See the Pen text-align by Matan (@matanyo) on CodePen.

בשיטה זו ניתן גם למרכז אלמנטים ולא רק טקסט אך ישנם כמה תנאים:
1. חייב להיות לאלמנט שאותו אנחנו רוצים למרכז, הורה שיקבל את הפקודה text-align: center.
2. במידה והאלמנט שלנו יהיה block הדבר לא יתאפשר ולכן רצוי שיהיה display: inline-block בשביל להתמרכז.

See the Pen text-align by Matan (@matanyo) on CodePen.

דגשים חשובים
text-align הינו אחד מן התכונות התורשתיות שיש בcss,  זאת אומרת שכל אלמנט של אותו הורה גם יקבל את הtext-align: center ולמעשה יהיה במרכז.
לא תמיד אנחנו רוצים שטקסטים יהיו מיושרים למרכז (כמו בדוגמא מקודם), ככה שנצטרך לשנות שוב הproperty לימין או לשמאל.


שיטה נוספות ומאוד מוכרת הינה הmargin auto שבשונה מtext-align כאן האלמנט שלנו חייב להיות display: block, מה שיוצר את המרכז כאן הוא הauto שמתקבל משני הצדדים של האלמנט ומאפשר לדפדפן לקבוע אוטומטית כמה margin יהיו מהצדדים.

שימו לב: ישנן כמה תגיות HTML שברירת המחדל שלהן display: block (בין היתר div), כך שאנו לא זקוקים לרשום זאת כל פעם מחדש.

See the Pen div centered by Matan (@matanyo) on CodePen.


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

נתחיל דווקא מהדרך היותר וותיקה בין שאר השיטות, שנתנה את הפתרון עוד בימי CSS2.
display: table-cell
vertical-align: middle

See the Pen table-cell-centered by Matan (@matanyo) on CodePen.

התמונה בדוגמה ממורכזת בצורה אנכית בעזרת vertical-align וגם בצורה אופקית בשיטת הmargin auto.


Padding הינו אחד הדברים החשובים להבין בCSS ובמיוחד להבין את האפשרויות והיכולות שלו.
ניצול מעניין בpadding הוא לשם מרכוז אלמנט על ידי container (הורה) שידאג לתחום את הגבולות של האלמנט שאותו נרצה למרכז.
במקרה שלנו אם נרצה למרכז גם באופן אופקי ואנכי אז נוכל לדאוג לpadding זהה מכל ארבעת הפאות העוטפות את האלמנט שלנו.

See the Pen padding centered by Matan (@matanyo) on CodePen.

בדוגמה כאן, אני הופך את הdisplay של הcontainer לinline-block אך ורק בשביל שזה יראה טוב יותר. גם במידה והcontainer היה block הpadding הי דחס את האלמנט למרכז.  


שיטת הtransform המוכרות ואהובה אשר מאפשרת לנו לקחת כל אלמנט ללא צורך במידע מדויקת אודות המידות שלו למרכז אותו.

See the Pen transform-centered by Matan (@matanyo) on CodePen.

דגשים חשובים
1. השיטה מחייבת שימוש בposition: absolute שעלול קצת לסבך מתכנתים פחות מנוסים.
2. הtop: 50% ידאג להוריד את האלמנט כלפי מטה ב50% אחוזים ובאותה מידה הleft: 50% ידאג לדחוף ימינה 50% את האלמנט.
הכל קורה בזכות ה(transform: translate(-50%, -50% שה-50% אחוזים הראשונים דואגים למשוך חצי מגודלו של האלמנט בחזרה שמאלה, וה50% לאחר הפסיק ידאגו להחזיר חצי מגודלו של האלמנט כלפי מעלה.
3. חשוב חשוב חשוב כשמשתמשים בtransform רצוי להוסיף את כל הprefixs שניצור התאמה לכל הדפדפנים.

קצת היסטוריה: בעבר היו מיישמים שיטה זו עם margin שלילי – לוקחים את גודל המדויק של האלמנט ולוקחים אותו במינוס חצי מגודלו כלפי מעלה ומינוס חצי מגדלו כלפי שמאלה.


בטוח שיצא לכם לשמוע על flexbox וכמה שהדבר הזה עצומתי. בין היתר הדבר המופלא הזה מסוגל בעזרת 3 שורות קוד למרכז כל דבר בצורה מדהימה.
נשנה להורה של האלמנט שלנו לdisplay: flexbox , אחרי זה  justify-content: center שימרכז עברנו בצורה אפוקית ובעזרת align-items: center האלמנט ימרכז בצורה אנכית.

See the Pen flexbox-centered by Matan (@matanyo) on CodePen.

על ידי margin כל אלמנט ילד יכול להחליט על מיקומו, ללא תלות בפקודות של ההורה שלו.
וזה נראה כך:

See the Pen flexbox-centered-margin by Matan (@matanyo) on CodePen.

שימו לב: הדפדפנים בגרסאות החדשות ביותר יתמכו בflexbox, הבעיה שיש מקרים שצריך לתמוך בגרסות אחורה של IE וכאן לא יעזור כל prefix שננסה.

לסיכום:
ראינו מגוון שיטות למרכז אלמנטים, הדבר החשוב כאן – ההבנה מתי עדיף להשתמש בשיטה זו או אחרת, שזה משהו שנרכש עם הזמן והניסיון.
המלצה – במידה ואין לכם צורך לתמוך בדפדפנים ישנים, גשו ישר לflexbox כי היא פשוט הכי יעילה ותמיד כדאי לשפר את טכניקה של הדבר הכי חדש בשפה.

מקורות קריאה – למי שרוצה להרחיב בנושא:
css-tricks
w3.org
w3schools

מתן יוסף

תמיד מתעניין ורוצה לדעת עוד..
יש לכם משהו לשאול או להעיר?
קישור ללינקדאין שלי ↓

1 comment

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

Follow

Get every new post delivered to your Inbox

Join other followers