איך ליישר למרכז אלמנטים באמצעות CSS

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

יישור אלמנט block בעל רוחב קבוע

כשרוצים ליישר אלמנט עם display: block + רוחב קבוע – פשוט מגדירים שוליים אוטומטיים משתי הצדדים, מה שיגרום לשוליים להתחלק שווה בשווה בין ימין ושמאל:
margin-right: auto; margin-left: auto.

יש לשים לב שלאלמנט אין את ההגדרה float, שמעיפה את האלמנט ימינה או שמאלה, ואז השוליים האוטומטיים לא יעבדו.

יישור אלמנט inline/inline-block

כמו שהרחבנו בפרק שעוסק בסוגי הdisplay בCSS, ההגדרות inline/inline-block משמעותן הפיכת האלמנט למעין מילה במשפט. כמו ששולטים על יישור טקסט באמצעות קביעת text-align לאלמנט שמכיל את הטקסט – כך בדיוק מיישרים אלמנט שהינו inline או inline-block באמצעות קביעת text-align מתאים לאלמנט האב שמכיל את האלמנט שאותו רוצים ליישר. שימו לב לא לתת את ההגדרה לאלמנט שאמור להיות מיושר אלא לאבא שלו.

אופן זה מתאים גם כאשר לאלמנט עם inline-block יש רוחב קבוע או באחוזים.

אלמנט בעל מיקום אבסולוטי – position: absolute/fixed

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

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

כאשר יש לאלמנט רוחב קבוע באחוזים, יש להגדיר כך left: [50% – X%] כשX מייצג חצי מהרוחב של האלמנט. לדוגמא אם יש לנו סרגל שתופס 80 אחוזים מרוחב המסך – X יהיה שווה 40, ואז מה שנכתוב יהיה left: 10% (חישוב של 50 – 40 שהוא חצי מהרוחב).

במידה ויש לאלמנט רוחב קבוע בפיקסלים, ניתן להגדיר כך: left: 50%; margin-left: -Xpx; כאשר X מייצג שוב מחצית מהרוחב הקבוע של האלמנט. אם נניח לדוגמא פופאפ ברוחב 500 פיקסלים, מחצית מהרוחב שלו היא 250 פיקסלים, ואז נכתוב margin-left: -250px;

כאשר אין לאלמנט רוחב קבוע כלל, ניתן להגדיר באמצעות transform. אציין שניתן להשתמש באופן הזה גם בשאר המקרים. אופן השימוש:
left: 50%;
transform: translateX(-50%);

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

1. תאימות דפדפנים – אם רוצים לתת תמיכה לדפדפני מובייל, יש להוסיף -webkit-transform, ובנוסף דפדפנים ישנים מידי לא תומכים בtransform.
2. סקריפטים בדרך כלל לא מזהים את הtransform. מאחר וזה לא שינוי במהות של האלמנט אלא שינוי חיצוני בלבד. כך שאם נחשב את הoffset() של האלמנט בעל הtransform – סקריפטים לא מזהים את זה.

הערת אגב, כשמשתמשים בtransform חשוב להגדיר בנוסף -webkit-transform עם אותו ערך, עבור דפדפני webkit במכשירי סלולר שעדיין אינם תומכים בהגדרה כשהיא ללא -webkit-.

 

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