מעוניין לרכז תמונה באמצעות CSS? בעיות יישור הן לעתים קרובות מקור לתסכול עבור מעצבי אתרים. למרבה המזל, מרכז תמונה עם CSS הוא ממש פשוט, ואנו נראה לך איך לעשות זאת בכמה שלבים.

כמו בהרבה משימות עיצוב אתרים, יש יותר מדרך אחת לעשות זאת! נסקור שלוש שיטות עיקריות במאמר זה. בואו נתחיל!

1. השתמש ב-Margin Property

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

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

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

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

img.center {
 בלוק תצוגה;
 שוליים-שמאלי: אוטומטי;
 שוליים-ימין: אוטומטי;
 רוחב: 800 פיקסלים;
}

2. השתמש ב-Flexbox Layout

instagram viewer

שיטה זו דורשת לשים את התמונה באלמנט ברמת בלוק, בדרך כלל א div:

לאחר שעשית זאת, תוכל להוסיף כמה מאפיינים כדי לתמרן את המראה שלו. אתה תשתמש בשני מאפייני CSS.

הראשון הוא ה לְהַצִיג נכס שהערך שלו מוגדר ל לְהַגמִישׁ. אתה יכול גם השתמש ב-flex כדי ליישר אלמנטים ב-HTML. הנכס השני שתוסיף ל-div שלך הוא להצדיק-תוכן, כשהערך שלו מוגדר ל מֶרְכָּז ככה:

div.center {
 תצוגה: flex;
 להצדיק-תוכן: מרכז;
}

3. השתמש באלמנט המרכז שהוצא משימוש

שיטות עבודה מומלצות באינטרנט מעודדות אותך להשתמש ב-CSS עבור סגנון וב-HTML עבור סמנטיקה, לכן אל תשתמש בשיטת HTML זו. ה מֶרְכָּז תג, שמרכז את תוכנו אופקית, הוצא משימוש ב-HTML5.

אבל אם אתה חייב, הנה איך למרכז תמונה באמצעות HTML בלבד. פשוט לעטוף את img תג בתג מרכזי כך:

כך ליישר את התמונות שלך ב-HTML

הראינו לך שלוש שיטות שונות וקלות לשימוש למרכז את התמונות שלך במסמך HTML. נסה את כולם ובחר את זה שמתאים לך ביותר. הימנע מהשיטה השלישית אלא אם כן אין לך ברירה!

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

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

קרא הבא

לַחֲלוֹקצִיוּץלַחֲלוֹקאימייל

נושאים קשורים

  • תִכנוּת
  • CSS
  • עיצוב אתרים

על הסופר

דוד אברהם (31 מאמרים שפורסמו)

דיוויד הוא חובב וורדפרס שנלהב לעזור לעסקים קטנים לצמוח!

עוד מדוד אברהם

הירשם לניוזלטר שלנו

הצטרף לניוזלטר שלנו לקבלת טיפים טכניים, ביקורות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!

לחץ כאן כדי להירשם