כיצד אוכל למרכז טקסט (אופקי ואנכי) בתוך div

Kyzd Wkl Lmrkz Tqst Wpqy W Nky Btwk Div



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

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







כיצד למרכז טקסט אופקית בתוך div?

כדי למרכז טקסט אופקית בתוך div, עיין בהליך הנתון.



שלב 1: צור מיכל div



בתחילה, צור מיכל div בעזרת ה-'

' אלמנט. לאחר מכן, הכנס ' תְעוּדַת זֶהוּת ' תכונה בתוך תג הפתיחה של div. לאחר מכן, הטמע קצת טקסט בין התג div:





< div תְעוּדַת זֶהוּת = 'align-content' >
Linuxhint הוא אחד מהאתרים הטובים ביותר ל יצירת תוכן.
div >


תְפוּקָה


שלב 2: גש ל-div Container למרכז יישור טקסט



כעת, גש למיכל ה-div בעזרת ' תְעוּדַת זֶהוּת ' שם תכונה עם בורר ' # ' והחל את מאפייני ה-CSS הבאים:

#align-content{
רוֹחַב: 80 % ;
שולים: 0 אוטומטי;
ריפוד: 20px;
רקע כללי: #c8edf3;
יישור טקסט: מרכז;
צבע: rgb ( 49 , חֲמֵשׁ עֶשׂרֵה , 240 ) ;
}


כאן:

    • ' רוֹחַב 'מאפיין משמש להגדרת גודל הרוחב של המכולה.
    • ' שולים ” מציין רווח ריק מחוץ למיכל.
    • ' ריפוד ' מגדיר רווח בתוך הגבול של האלמנט.
    • ' רקע כללי ' מגדיר את צבע הרקע בצד האחורי של האלמנט.
    • ' יישור טקסט מאפיין ' משמש להגדרת יישור הטקסט כ' מֶרְכָּז '.
    • ' צֶבַע ” מציין צבע עבור הטקסט בתוך הגבול.

ניתן לראות שמרכזנו בהצלחה טקסט מיושר אופקית בתוך ה-div שנוצר:

כיצד למרכז טקסט אנכית בתוך div?

כדי למרכז טקסט אנכית בתוך מיכל div, עקוב אחר ההוראות המצורפות.

שלב 1: גש ל-div Container

קודם כל, גש למיכל ה-div שנוצר.

שלב 2: החל מאפייני CSS על מרכז טקסט אנכית

לאחר מכן, החל את מאפייני ה-CSS המפורטים להלן למרכז טקסט אנכית ב-div:

#align-content{
תצוגה: תא טבלה;
רוחב: 300 פיקסלים;
גובה: 150 פיקסלים;
ריפוד: 10px;
צבע כחול;
צבע רקע: rgb ( 248 , 215 , 166 ) ;
גבול: 3 פיקסלים מקווקו #f09d03;
אנכי-יישר: אמצע;
}


לפי קטע הקוד לעיל:

    • הגדר את ' לְהַצִיג ' שמציין את התנהגות התצוגה של האלמנט כ' תא שולחן ', כלומר הוא פועל כמו התא של הטבלה באלמנט div.
    • ' רוֹחַב ' המאפיין מציין את גודל רוחב האלמנט.
    • ' גוֹבַה ' קובע את גובה האלמנט.
    • ' ריפוד ' מגדיר רווח ריק בתוך האלמנט.
    • ' צֶבַע ' משמש להגדרת צבע הטקסט בתוך האלמנט.
    • ' צבע רקע ' מציין את צבע החלק האחורי של האלמנט.
    • ' גבול ' מאפיין מגדיר גבול על אלמנט.
    • ' יישור אנכי מאפיין ' משמש להגדרת היישור האנכי של אלמנט מוגדר ב' אֶמצַע '.

תְפוּקָה


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

סיכום

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

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