כיצד למרכז תמונה באמצעות יישור טקסט: מרכז

אלמנט אלמנט inline (ערך תצוגה של inline-block). ניתן למרכז אותו בקלות על ידי הוספת text-align: center;המאפיין CSS לרכיב האב שמכיל אותו.

כדי למרכז תמונה באמצעות text-align: center;עליך למקם את החלק הפנימי של אלמנט ברמת בלוק כגון a div. מכיוון text-alignשהמאפיין חל רק על אלמנטים ברמת הבלוק, אתה מציב text-align: center;על האלמנט ברמת הבלוק העוטף כדי להשיג מרכוז אופקי .

דוגמא

   Center an Image using text align center  .img-container { text-align: center; } 

הערה: אלמנט האב חייב להיות אלמנט חסום. אם זה לא אלמנט חסום, עליך להוסיףdisplay: block;מאפיין CSS יחד עםtext-alignהמאפיין.

   Center an Image using text align center  .img-container { text-align: center; display: block; }      

הדגמה: Codepen

התאמת אובייקט

לאחר שהתמונה שלך מרוכזת, ייתכן שתרצה לשנות את גודל התמונה. object-fitמציין רכוש כיצד מגיב אלמנט לרוחב / גובה של תיבת ההורה של אותו.

ניתן להשתמש במאפיין זה לתמונות, וידאו או כל מדיה אחרת. ניתן להשתמש בו גם עם object-positionהמאפיין כדי לקבל שליטה רבה יותר על אופן הצגת המדיה.

בעיקרון אנו משתמשים object-fitבמאפיין כדי להגדיר כיצד הוא מותח או לוחץ מדיה מוטבעת.

תחביר

.element 

ערכים

• fill: זהו ערך ברירת המחדל . שנה את גודל התוכן כך שיתאים לתיבת האב שלו ללא קשר ליחס הגובה-רוחב.
• contain: שנה את גודל התוכן כך שימלא את תיבת האב שלו באמצעות יחס הממדים הנכון.
• cover: דומה containאך לעתים קרובות חותך את התוכן.
• none: להציג את התמונה בגודלה המקורי.
• scale-down: להשוות את ההבדל בין noneלבין containכדי למצוא את גודל האובייקט בטון הקטן.

תאימות לדפדפן

object-fitנתמך על ידי רוב הדפדפנים המודרניים, על המידע המעודכן ביותר על תאימות אתה יכול לבדוק את זה //caniuse.com/#search=object-fit.

תיעוד

• יישור טקסט - MDN
• התאמת אובייקטים - MDN
• MDN