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