מפתחים רבים מתקשים בעבודה עם תמונות. הטיפול בתגובתיות וביישור הוא קשה במיוחד, ובמיוחד מרכז תמונה באמצע הדף.
אז בפוסט זה, אראה כמה מהדרכים הנפוצות ביותר למרכז תמונה בצורה אנכית ואופקית באמצעות מאפייני CSS שונים.
עברתי על מאפייני המיקום והתצוגה של CSS בפוסט הקודם שלי. אם אינך מכיר את המאפיינים האלה, אני ממליץ לבדוק את הפוסטים האלה לפני שתקרא מאמר זה.
הנה גרסת וידאו אם ברצונך לבדוק אותה:
מרכז תמונה אופקית
נתחיל ממרכז תמונה אופקית באמצעות 3 מאפייני CSS שונים.
יישור טקסט
הדרך הראשונה למרכז תמונה בצורה אופקית היא שימוש text-alignבמאפיין. עם זאת, שיטה זו פועלת רק אם התמונה נמצאת בתוך מיכל ברמת בלוק כגון :
div { text-align: center; } שוליים: אוטומטי
דרך נוספת למרכז תמונה היא באמצעות margin: autoהמאפיין (לשוליים שמאליים ושוליים ימניים).
עם זאת, שימוש margin: autoלבד לא יעבוד עבור תמונות. אם אתה צריך להשתמש margin: auto, יש גם שני מאפיינים נוספים שאתה צריך להשתמש בהם.
למאפיין margin-auto אין השפעות על אלמנטים ברמה המקוונת. מכיוון
img { margin: auto; display: block; }שנית, עלינו להגדיר רוחב. אז השוליים השמאליים והימניים יכולים לקחת את שאר השטח הריק וליישר את עצמם אוטומטית, מה שעושה את הטריק (אלא אם כן אנו נותנים לו רוחב של 100%):
img { width: 60%; margin: auto; display: block; }תצוגה: להגמיש
הדרך השלישית למרכז תמונה אופקית היא באמצעות display: flex. בדיוק כמו שהשתמשנו text-alignבנכס עבור מכולה, אנו משתמשים גם display: flexעבור מכולה.
עם זאת, שימוש display: flexלבד לא יספיק. על המכולה לכלול גם מאפיין נוסף הנקרא justify-content:
div { display: flex; justify-content: center; } img { width: 60%; }justify-contentהרכוש עובד יחד עם display: flex, אשר אנו יכולים להשתמש כדי למרכז את התמונה אופקית.
לבסוף, רוחב התמונה חייב להיות קטן יותר מרוחב המכולה, אחרת זה לוקח 100% מהשטח ואז אנחנו לא יכולים למרכז אותו.
חשוב:display: flex רכוש אינה נתמכת בגרסאות ישנות יותר של דפדפן. ראה כאן לפרטים נוספים.
מרכז תמונה אנכית
תצוגה: להגמיש
ליישור אנכי, השימוש display: flexשוב מועיל באמת.
שקול מקרה בו הגובה של המיכל שלנו הוא 800 פיקסלים, אך גובה התמונה הוא 500 פיקסלים בלבד:
div { display: flex; justify-content: center; height: 800px; } img { width: 60%; height: 500px; }עכשיו, במקרה זה, הוספת שורת קוד אחת למיכל align-items: center, עושה את הטריק:
div { display: flex; justify-content: center; align-items: center; height: 800px; }align-itemsעמדת הנכס יכול אלמנטים אנכיים אם נעשה שימוש יחד עם display: flex.
תפקיד: מאפיינים מוחלטים וממירים
שיטה נוספת ליישור אנכי היא באמצעות המאפיינים positionו- transformיחד. זה קצת מסובך, אז בואו נעשה את זה צעד אחר צעד.
שלב 1: הגדר מיקום מוחלט
ראשית, אנו משנים את התנהגות המיצוב של תמונת מדף staticכדי absolute:
div { height: 800px; position: relative; background: red; } img { width: 80%; position: absolute; }כמו כן, הוא צריך להיות בתוך מיכל הממוקם יחסית, לכן אנו מוסיפים position: relativeלחלוקה המיכלית שלו.
שלב 2: הגדר מאפיינים עליונים ומשמאליים
שנית, אנו מגדירים את המאפיינים העליונים והשמאליים של התמונה, ומציבים אותם על 50%. פעולה זו תעביר את נקודת המוצא (למעלה משמאל למעלה) של התמונה למרכז המכולה:
img { width: 80%; position: absolute; top: 50%; left: 50%; }שלב 3: הגדר את מאפיין הטרנספורמציה
אבל השלב השני העביר את התמונה בחלקה מחוץ למיכל שלה. אז אנחנו צריכים להחזיר אותו פנימה.
הגדרת transformמאפיין והוספת -50% לציר ה- X וה- Y עושה את הטריק:
img { width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }ישנן דרכים אחרות למרכז דברים בצורה אופקית ואנכית, אך הסברתי את הנפוצים ביותר. אני מקווה שהפוסט הזה עזר לך להבין כיצד ליישר את התמונות שלך במרכז הדף.
אם אתה רוצה ללמוד עוד על בניית אתרים, אל תהסס לבקר בערוץ Youtube שלי לקבלת מידע נוסף.
תודה שקראת!