למד כיצד למרכז תמונה ב-DIV עם HTML ו-CSS

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

במאמר זה נסביר כיצד למרכז תמונה ב-DIV באמצעות HTML ו-CSS, שהן שפות התכנות המשמשות ליצירה ועיצוב של דפי אינטרנט. אנחנו הולכים להראות לך כמה שיטות ודוגמאות כדי שתוכל לבחור את המתאימה לך ביותר.

מה זה DIV

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

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

כיצד למרכז תמונה אופקית

מרכז תמונה אופקית ב-DIV פירושו ליישר את התמונה במרכז של רוחב ה-DIV. ישנן מספר דרכים לעשות זאת, אך הנפוצות ביותר הן הבאות:

• השתמש במאפיין text-align: center. מאפיין זה מוחל על האלמנט DIV וגורם לכל האלמנטים בתוך ה-DIV להתיישר למרכז אופקית. לדוגמה:

• שימוש במאפיין השוליים: אוטומטי. מאפיין זה מוחל על רכיב ה-IMG וגורם לתמונה להיות אותם השוליים השמאלי והימני, ולמרכז אותה אופקית. כדי שזה יעבוד, התמונה חייבת להיות בעלת רוחב מוגדר ולהיות מסוג block או שתציג את המאפיין: block. לדוגמה:

• שימוש במאפיין טרנספורמציה: translateX(). מאפיין זה מוחל על אלמנט IMG וגורם לתמונה לנוע אופקית במרחק מסוים מהמיקום המקורי שלה. כדי למרכז אותו אופקית, עליך להזיז אותו 50% מהרוחב שלו ימינה. כדי שזה יעבוד, התמונה חייבת להיות בעלת רוחב מוגדר ולהיות מסוג block או להציג את המאפיין: block. לדוגמה:

כיצד למרכז תמונה אנכית

מרכז תמונה אנכית ב-DIV פירושו ליישר את התמונה במרכז גובה ה-DIV. ישנן מספר דרכים לעשות זאת, אך הנפוצות ביותר הן הבאות:

• שימוש במאפיין יישור אנכי: middle. מאפיין זה מוחל על אלמנט IMG וגורם לתמונה להיות מיושרת אנכית למרכז ביחס לקו הבסיס של הטקסט. כדי שזה יעבוד, אלמנט DIV חייב להיות בעל גובה מוגדר ואלמנט IMG חייב להיות מסוג inline או בעל ה-display: inline property. לדוגמה:

• השתמש במאפיין margin-top ו-margin-bottom. מאפיינים אלה מוחלים על אלמנט ה-IMG וגורמים לתמונה להיות אותם השוליים העליונים והתחתונים, וממרכזים אותה אנכית. כדי לעבוד, אלמנט DIV חייב להיות בעל גובה מוגדר ואלמנט IMG חייב להיות בעל גובה מוגדר ולהיות מסוג block או בעל תכונת display: block. לדוגמה:

• שימוש במאפיין טרנספורמציה: translateY(). הפעם הוא מוחל על אלמנט ה-IMG וגורם לתמונה לנוע אנכית במרחק מסוים מהמיקום המקורי שלה. כדי למרכז אותו אנכית, עליך להזיז אותו 50% מגובהו כלפי מטה. כדי לעבוד, אלמנט DIV חייב להיות בעל גובה מוגדר ואלמנט IMG חייב להיות בעל גובה מוגדר ולהיות מסוג block או בעל תכונת display: block. לדוגמה:

כיצד למרכז תמונה על שני הצירים

מרכז תמונה על שני הצירים ב-DIV פירושו יישר את התמונה במרכז הן ברוחב והן בגובה של DIV, זה המורכב ביותר. ישנן מספר דרכים לעשות זאת, אך הנפוצות ביותר הן הבאות:

• שימוש במאפיין text-align: center ובמאפיין vertical-align: middle. מאפיינים אלו חלים על אלמנט DIV ואלמנט IMG בהתאמה, וגורמים לתמונה להיות מיושרת למרכז הן אופקית והן אנכית. כדי שזה יעבוד, אלמנט DIV חייב להיות בעל גובה מוגדר ואלמנט IMG חייב להיות מסוג inline או בעל ה-display: inline property. לדוגמה:

• שימוש במאפיין השוליים: אוטומטי. כאן הוא מוחל על אלמנט ה-IMG וגורם לתמונה להיות שוליים שווים בכל ארבעת הצדדים, ולמרכז אותה על שני הצירים. כדי לעבוד, אלמנט DIV חייב להיות בעל גובה מוגדר ואלמנט IMG חייב להיות בעל רוחב וגובה מוגדרים ולהיות מסוג block או בעל ה-display: block property. לדוגמה:

• שימוש במאפיין transform: translate(). במקרה זה הוא מוחל על אלמנט ה-IMG וגורם לתמונה לנוע מרחק מסוים מהמיקום המקורי שלה בשני הצירים. כדי למרכז אותו, אתה צריך להזיז אותו 50% מהרוחב שלו ימינה ו-50% מהגובה שלו למטה. כדי לעבוד, אלמנט DIV חייב להיות בעל גובה מוגדר ואלמנט IMG חייב להיות בעל רוחב וגובה מוגדרים ולהיות מסוג block או בעל ה-display: block property. לדוגמה:

מרכז כל תמונה

מרכז תמונה ב-DIV יכול להיות שימושי כדי לשפר את המראה והארגון של האתר שלך, וכדי להדגיש את התמונה שברצונך להציג. מרכז תמונה ב-DIV לא קשה, אבל זה תלוי במספר גורמים כמו סוג התמונה, גודל ה-DIV, סגנון ה-DIV וכו'.

במאמר זה הסברנו כיצד למרכז תמונה ב-DIV באמצעות HTML ו-CSS, שהן שפות התכנות המשמשות ליצירה ועיצוב של דפי אינטרנט. הראנו לך שיטות ודוגמאות שונות לבחירתך. זה שמתאים לך ביותר.

אנו מקווים שאהבתם את המאמר הזה ולמדתם כיצד לרכז תמונה ב-DIV. אם יש לך שאלות או הצעות, השאר לנו תגובה. אתה יכול גם לשתף את המאמר הזה עם החברים או המשפחה שלך שגם אוהבים את HTML או CSS. בואו לעבוד ולתזמן!