כיצד למרכז אנכית רכיב div עבור כל הדפדפנים באמצעות CSS

בפיתוח אתרים, זה חיוני ליצור את הפריסה של האלמנט כראוי. עם זאת, מאפייני CSS רבים, כגון CSS3 Flexible Box, שימושיים להתאמת הפריסה של דפי אינטרנט ורכיבי HTML. Flexible Box משמש לסידור דפי אינטרנט ויישומים באופן רקורסיבי. מצב Flexbox זה עוזר ליצור פריסות עבור דפי אינטרנט ויישומים מורכבים.

פוסט זה ידריך אותך כיצד לרכז רכיב div עבור כל הדפדפנים המשתמשים ב-CSS בצורה אנכית.

כיצד ליישר רכיב div באמצעות CSS?

ניתן ליישר את רכיב ה-div אנכית על ידי שימוש בתכונת התצוגה ' לְהַגמִישׁ ' יחד עם ה-CSS ' align-items 'רכוש ו' להצדיק-תוכן ' תכונה. המאפיין 'align-items' מיישר את האלמנט בצורה אנכית, והמאפיין 'justify-content' מיישר את התוכן אופקית.

דוגמה: כיצד למרכז אנכית אלמנט div עם CSS?

ב-HTML, תחילה, הוסף את '

' רכיב ולהקצות לו את המחלקה ' תוכן עיקרי '. בין התגים '

', הוסף ' ' רכיב עם התכונות הבאות:

---

---

• ' src תכונה ' משמשת לציון כתובת האתר של התמונה.
• ' הכל ' תכונה מגדירה טקסט כלשהו שיוצג במקום תמונה אם היא לא תצליח להיטען.
• ' רוֹחַב תכונה ' משמשת כדי להתאים את רוחב התמונה.
• לאחר מכן, הוסף את '

  ' רכיב להטמעת הפסקה בדף.

הנה קוד ה-HTML:

< div מעמד = 'תוכן עיקרי' >
< img src = '/images/laptop-notepad.jpg' הכל = 'מחשב נייד עם פנקס ועט' רוֹחַב = '300' >
< ע > מחשב נייד הוא מחשב נייד המוכר גם כפי ש מחשב מחברת. ע >
div >

ב-CSS, נציין מספר מאפייני סטיילינג ל-div.

סגנון 'תוכן עיקרי'.

.תוכן עיקרי {
גוֹבַה: חמישים % ;
צבע רקע: #46C2CB;
גודל גופן: 24px;
ריפוד: 10px;
}

מאפייני ה-CSS הבאים מוגדרים ב' תוכן עיקרי ' מעמד:

• ' גוֹבַה ' המאפיין משמש כדי להתאים את הגובה של המיכל
  .
• ' צבע רקע ' מגדיר את צבע הרקע של האלמנט.
• ' גודל גופן ' מציין את גודל הגופן של האלמנט.
• ' ריפוד ' מאפיין מגדיר מרחב סביב תוכן האלמנט.

מהפלט, אתה יכול לראות שהתוכן של אלמנט div אינו במרכז:

בואו נתקדם כדי ליישם את מאפייני ה-CSS שעוזרים למרכז את '

' אלמנט אנכית. הוסף את המאפיינים האלה למחלקה ' תוכן עיקרי ' המשמשים לגישה לרכיב

:

לְהַצִיג: לְהַגמִישׁ ;
align-items: center;

הנה התיאור:

• ' לְהַצִיג ' תכונה ' לְהַגמִישׁ ' משמש כדי להפוך את פריסת ה-div לגמישה לאלמנט שלו.
• ' align-items ' מאפיין CSS מוגדר כ' מֶרְכָּז ”, שייישר אנכית את רכיבי ה-div.

תְפוּקָה

למדת כיצד למרכז רכיב div בצורה אנכית עבור כל הדפדפנים המשתמשים ב-CSS.

סיכום

כדי למרכז אנכית רכיב div, ה-CSS ' לְהַצִיג ' הנכס משמש עם ' לְהַגמִישׁ ' ערך. ערך זה הופך את מיכל

לגמיש למרכיביו. כדי ליישר אנכית את אלמנט ה-div, כוונן את ' align-items ' מאפיין ולהקצות לו ' מֶרְכָּז ' ערך. בלוג זה הראה לך כיצד להשתמש ב-CSS למרכז אנכית רכיבי div בכל הדפדפנים.