כיצד ליישר טקסט אנכית ב-CSS

הקופסה נוצרת באמצעות ' 3 פיקסלים 'גבול ו' 250 פיקסלים 'גובה. ה ' גודל גופן 'מאפיין משמש עם הערך ' 24 פיקסלים ' כדי להפוך את הגופן לגלוי. אנו נקצה ל-div ' גובה קו 'של' 250 פיקסלים ' ליישור הטקסט שלו אנכית באמצע. לאחר מכן, נשתמש ב' יישור טקסט ' מאפיין ליישור הטקסט במרכז:

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

עכשיו בואו נעבור לשיטה הבאה.

שיטה 2: שימוש ב-display and align-items Property ליישור טקסט אנכי ב-CSS

' Flexbox ” היא פריסה חד מימדית המאפשרת לעצב HTML. אתה יכול גם להשתמש בו כדי ליישר פריטים אנכית או אופקית.

אז בואו ניקח דוגמה וניישר טקסט אנכית בעזרת ה-flexbox.

דוגמא

קודם כל, נגמיש את המיכל שלנו על ידי קביעת הערך של ' לְהַצִיג 'נכס כ' לְהַגמִישׁ '. לאחר מכן, השתמש ב' align-items ” מאפיין להגדרת התוכן במרכז אנכית. יתר על כן, כדי ליישר את התוכן במרכז אופקית, ' להצדיק-תוכן 'יעשה שימוש בנכס:

הטקסט שצוין מיושר למרכז בהצלחה:

סיפקנו שיטות הקשורות ליישור טקסט אנכית ב-CSS.

סיכום

ב-CSS, ניתן ליישר טקסט בקלות אנכית בעזרת ' גובה קו ' תכונה. אתה יכול גם להשתמש ב' flexbox ' ליישור אנכי של טקסט עם ' לְהַצִיג ' ו' align-items ' נכסים. Flexbox היא פריסה חד מימדית והיא משמשת פשוט ליישור אנכי או אופקי של פריטים. פוסט זה הציע שתי שיטות קלות ביותר שיכולות לעזור לך ליישר טקסט אנכית ב-CSS.