כיצד למרכז תמונה ב-Div אופקית?
המפתח יכול להשתמש במאפיין השוליים, מודול Flexbox, פריסת תצוגת רשת ותכונת מיקום כדי למרכז תמונה ב-div אופקית. עקוב אחר המדריך שלהלן כדי ליישר את התמונה למרכז אופקית בתג div.
נניח שיש div שבו התמונה ממוקמת בצורה כזו בקובץ ה-HTML:
< div מעמד = 'שורש' >
< img src = '../book.jpg' גוֹבַה = 'חמישים%' רוֹחַב = 'חמישים%' מעמד = 'תמונה' >
< / div >
התמונה מקבלת רוחב וגובה של 50% ומחלקה של 'תמונה'.
שימוש ב-Margin Property
משתמשים יכולים להוסיף רווח סביב רכיבי HTML באמצעות מאפיין השוליים. הוא מקצה שוליים בהתאם לשטח הפנוי לאחר שינוי גודל מסך החלון. לדוגמה, מגדיר את השוליים-שמאל וימין ל-auto, ומאפיין התצוגה מוגדר לחסום:
img {
בלוק תצוגה;
שוליים-שמאלי: אוטומטי;
שוליים-ימין: אוטומטי;
}
לאחר ביצוע הדוגמה לעיל, דף האינטרנט נראה כך:
הפלט לעיל הראה שהתמונה נמצאת כעת במרכז.
שימוש במודול Flexbox
ה ' flexbox ” הוא מודול המכיל קבוצה שלמה של מאפיינים. במקרה שלנו, בחר את מחלקת אלמנט השורש והשתמש ב-flex כערך של מאפיין התצוגה. הגדר מרכז כערך עבור ' להצדיק-תוכן ' ו' align-items ' נכסים:
.שורש {תצוגה: flex;
לְהַצְדִיק- תוֹכֶן : מרכז;
align-items: center;
רקע כללי- צֶבַע : כחול;
}
דף האינטרנט נראה כך, לאחר ביצוע הקוד:
הפלט שלמעלה מראה שהתמונה מוצגת במרכז ה-div עם צבע רקע מוגדר ל'כחול'.
שימוש במודול פריסת תצוגת רשת
פריסת תצוגת הרשת כוללת 12 עמודות, והרוחב הכולל מוגדר ל-100% והיא ממקמת כל רכיב במיקום ספציפי בדף האינטרנט:
.שורש {תצוגה: רשת;
חפצי מקום: מרכז;
}
בקטע הקוד שלמעלה, ערך ה'רשת' מוקצה למאפיין התצוגה. בעוד ש'מקום-פריט' משמש כקיצור למאפיינים 'הצדקת-תוכן' ו-'יישר-פריטים':
הפלט מאמת שהתמונה נמצאת במרכז ה-div בשיטת הרשת:
שימוש בתכונת מיקום
על ידי הגדרת המיקום של מחלקת השורש לערך יחסי ומחלקת התמונה לערך מוחלט. ניתן להציג את התמונה במרכז ה-div:
.שורש {עמדה: קרוב משפחה;
}
.תמונה {
רוֹחַב : 700px;
גוֹבַה : 500px;
מיקום: מוחלט;
שמאלה: חמישים %;
טרנספורמציה: translateX ( - חמישים % ) ;
}
התמונה מועברת לשמאל של '50%' ולאחר מכן הופכת חזרה ל-'-50%' בציר ה-X. הוא מציג את התמונה במרכז ה-div אופקית:
כך ניתן לרכז את התמונה ב-div בצורה אופקית.
סיכום
כדי להגדיר אופקית את התמונה ברכיב div, השתמש ב-' שולים ', ' מודול גמיש ', ' פריסת רשת ' ו' עמדה ' נכסים. ה ' שולים ' המאפיין של שמאל וימין מוגדר אוטומטי. 'מודול הגמיש' ו'פריסת רשת' מגדירים את התצוגה להתגמש ורשת בהתאמה ומשתמשים ב-' מקום פריט ' מאפיין למרכז את התמונה. מאפיין המיקום מגדיר את הערך ביחס למחלקת השורש והמוחלט למחלקת התמונה ומשתמש במאפיינים 'שמאלה' ו'טרנספורמציה'. בלוג זה הדגים בהצלחה כיצד למרכז תמונות ב-div אופקית.