בזמן עיצוב דפי אינטרנט, מפתחים יכולים להוסיף רכיבים שונים, כולל תמונות, טקסט, טבלאות ואחרים. יתר על כן, ניתן ליישר טקסט למרכז ב-div באמצעות מאפייני CSS מרובים. השיטה הפופולרית ביותר למרכז טקסט אופקית היא להשתמש ב-' יישור טקסט ' תכונה. יתר על כן, אתה יכול גם להשתמש ב' גובה קו ' ו' יישור אנכי ' תכונות ליישור אנכי של הטקסט.
פוסט זה יציין את השיטה למרכז את הטקסט אנכית כמו גם אופקית בתוך div.:
כיצד למרכז טקסט אופקית בתוך div?
כדי למרכז טקסט אופקית בתוך div, עיין בהליך הנתון.
שלב 1: צור מיכל div
בתחילה, צור מיכל div בעזרת ה-' כעת, גש למיכל ה-div בעזרת ' תְעוּדַת זֶהוּת ' שם תכונה עם בורר ' # ' והחל את מאפייני ה-CSS הבאים: ניתן לראות שמרכזנו בהצלחה טקסט מיושר אופקית בתוך ה-div שנוצר: כדי למרכז טקסט אנכית בתוך מיכל div, עקוב אחר ההוראות המצורפות. שלב 1: גש ל-div Container קודם כל, גש למיכל ה-div שנוצר. שלב 2: החל מאפייני CSS על מרכז טקסט אנכית לאחר מכן, החל את מאפייני ה-CSS המפורטים להלן למרכז טקסט אנכית ב-div: תְפוּקָה כדי למרכז את הטקסט בצורה אנכית ואופקית בתוך div, ראשית, צור מיכל div בעזרת אלמנט
< div תְעוּדַת זֶהוּת = 'align-content' >
Linuxhint הוא אחד מהאתרים הטובים ביותר ל יצירת תוכן.
div >
תְפוּקָה
שלב 2: גש ל-div Container למרכז יישור טקסט
רוֹחַב: 80 % ;
שולים: 0 אוטומטי;
ריפוד: 20px;
רקע כללי: #c8edf3;
יישור טקסט: מרכז;
צבע: rgb ( 49 , חֲמֵשׁ עֶשׂרֵה , 240 ) ;
}
כאן:
כיצד למרכז טקסט אנכית בתוך div?
תצוגה: תא טבלה;
רוחב: 300 פיקסלים;
גובה: 150 פיקסלים;
ריפוד: 10px;
צבע כחול;
צבע רקע: rgb ( 248 , 215 , 166 ) ;
גבול: 3 פיקסלים מקווקו #f09d03;
אנכי-יישר: אמצע;
}
לפי קטע הקוד לעיל:
למדת על ההליך המלא למרכז את הטקסט בתוך המיכל בשני הדרכים, אנכית ואופקית. סיכום