html | כיצד למרכז אלמנט בדיוק באמצע ההורה עם אלמנטים בצדדים ברוחב שונה

[pcinfogmach]

יש לי אלמנט עם שלושה אזורים:

צד שמאל (למשל כפתור)
כותרת מרכזית (title)
צד ימין (כמה כפתורים)

המטרה שלי: שהכותרת תהיה ממורכזת לגמרי ביחס לרוחב ההורה, ולא רק מבחינת הטקסט שלה.

הבעיה: אם צד שמאל וצד ימין אינם באותו רוחב, הכותרת נראית לא ממורכזת.
לעשות position:absolute לא בא בחשבון כי אז זה עלול לייצר מצב בו הטקסט מעל הכפתורים (אולי את זה אפשר לפתור עם z-index אבל זה עדיין יהרוס לי את אפקט ה-elipsis).

גם יש dropdown שהולך עם זה ששם ממש ניכר ההבדל

נ.ב הפרויקט נבנה ב-vue אם זה משנה

[צדיק תמים]

פוסט זה נמחק!

[pcinfogmach]

לבינתיים יצרתי פתרון על ידי component ב-vue אבל עדיין מסקרן אותי אם יש פתרון ב-html רגיל.

[meir lamdan]

לא ברור איך זה קשור לvue
תנסה לתת לילדים את הערך flex: 1 ותמרכז את הטקסט בעמודה האמצעית עם text-align: center

[pcinfogmach]

@meir-lamdan
קודם כל תודה!
תודה שלקחת מזמנך לענות לי.
הפתרון שלך לא עונה על הצרכים שלי אנא עיין בשאלת המקור שוב. תודה.

[חגי]

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

[pcinfogmach]

@חגי

https://codepen.io/pcinfogmach/pen/emZjxae
בדוגמא הראשונה אפשר לראות (על ידי הקו האדום) כיצד הטקסט לא ממורכז לאמצע הדף.
הדוגמא השנייה באה להמחיש כיצד אני רוצה שהאליפסיס ייראה.
הפיתוח שלי נועד עבור תצוגה צרה כמו במובייל ולכן חשוב לי שהאליספסיס יעבוד כמו שצריך.

[meir lamdan]

https://codepen.io/meirlamdan/pen/wBGxVzm

[pcinfogmach]

@meir-lamdan
וואלה — פתרת את זה! אפילו אם זה היה בטעות
הוספת גם באמצעי flex: 1, פשוט שכחת את ה־;, ולכן בפועל זה עבד בגלל הטעות.

הפתרון הנכון עובד כך:

בצד שמאל ובצד ימין מגדירים flex: 1, ואילו לאמצעי לא מגדירים כלום — שזה למעשה שווה־ערך ל־flex: 0 1 auto.

למה זה עובד?
כלל חשוב ב-Flexbox: ערכי ה-flex אינם מחולקים לפי מספר הפריטים, אלא רק לפי גורמי הגידול (grow).

כלומר, במקרה שלנו:

Left → grow: 1
Middle → grow: 0
Right → grow: 1

החישוב:
1 + 0 + 1 = 2

התוצאה:
Left מקבל חצי מהחלל הפנוי
Right מקבל חצי מהחלל הפנוי
Middle לא מקבל כלום מהחלל הנוסף (grow = 0)

אבל — ה-Middle עדיין מקבל את רוחב התוכן שלו (flex-basis: auto), ולכן הוא מתפרס בדיוק במרחב שנשאר בין שני הצדדים.

יש עוד פרט חשוב שבלעדיו זה לא יעבוד

.side-right {
  display: flex;
  justify-content: flex-end;
}

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

האמת היא שאני לא מבין את כל זה עד הסוף אם מישהו יכול להסביר את זה יותר טוב מאוד אשמח

[meir lamdan]

@pcinfogmach כתב בhtml | כיצד למרכז אלמנט בדיוק באמצע ההורה עם אלמנטים בצדדים ברוחב שונה:

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

@pcinfogmach כתב בhtml | כיצד למרכז אלמנט בדיוק באמצע ההורה עם אלמנטים בצדדים ברוחב שונה:

הוספת גם באמצעי flex: 1, פשוט שכחת את ה־;, ולכן בפועל זה עבד בגלל הטעות.

זה היה עובד, רק שזה היה טופס שליש מהשטח

[pcinfogmach]

@meir-lamdan
נכון וזה בדיוק היה הפלונטר שלי כי רציתי שזה ימלא את כל השטח שנשאר אם צריך. אבל עדיין יהיה במרכז אם לא.
תודה רבה רבה!