אפשר להשתמש בתגית או ב-align="center" כדי למרכז תמונה?

לא. והתכונה align על מיושנות ב-HTML5. דפדפנים עדיין מציגים את בשביל עמודים ישנים, אבל align="center" על תמונה מיישר אותה אנכית בתוך השורה, לא אופקית. השתמשו ב-CSS.

תיעוד CSS עם דוגמאות להרצה: מרכוז תמונה

Q: איך ממרכזים תמונה ב-HTML?

שמים text-align: center על האלמנט שמכיל אותה, למשל . תמונה היא inline כברירת מחדל, ולכן היא מתמרכזת כמו מילה בטקסט.

Q: איך ממרכזים תמונה עם margin auto?

קודם הופכים את התמונה לבלוק: img { display: block; margin: 0 auto; }. margin אוטומטי לא ממרכז אלמנטי inline, ותמונה היא inline עד שמשנים את זה.

Q: איך ממרכזים תמונה אנכית ואופקית?

הופכים את המכל שלה ל-grid (או flexbox) עם גובה: .box { display: grid; place-items: center; height: 300px; }. התמונה יושבת אז באמצע התיבה.

התשובה המהירה: text-align על ההורה

<img> הוא אלמנט inline: הוא יושב בשורת טקסט כמו מילה. לכן ממרכזים אותו באותה דרך שממרכזים טקסט, עם text-align: center על ההורה שלו:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center an image</title>
  <style>
    .wrap { text-align: center; border: 1px dashed #9ca3af; padding: 8px; }
  </style>
</head>
<body>
  <div class="wrap" id="wrap">
    <img id="img" width="160" height="100" alt="Blue rectangle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Crect width='160' height='100' rx='8' fill='%232563eb'/%3E%3C/svg%3E">
  </div>
</body>
</html>

הסגנון נכתב על ה-div, לא על התמונה. text-align: center על ה-<img> עצמו לא עושה כלום, כי אין בתוך התמונה טקסט ליישר.

שיטה 2: display block ו-margin auto

אם אתם מעדיפים לעצב את התמונה עצמה, הפכו אותה לבלוק ותנו לה margin אוטומטי בצדדים. המקום הפנוי משני הצדדים מתחלק שווה בשווה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Block and margin auto</title>
  <style>
    .centered {
      display: block;
      margin: 0 auto;
      max-width: 100%;
      height: auto;
    }
    .frame { border: 1px dashed #9ca3af; padding: 8px 0; margin-bottom: 8px; }
  </style>
</head>
<body>
  <div class="frame">
    <img class="centered" id="img" width="160" height="100" alt="Green rectangle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Crect width='160' height='100' rx='8' fill='%2316a34a'/%3E%3C/svg%3E">
  </div>
  <div class="frame">
    <img style="margin: 0 auto;" id="inline" width="160" height="100" alt="Gray rectangle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Crect width='160' height='100' rx='8' fill='%239ca3af'/%3E%3C/svg%3E">
  </div>
</body>
</html>

לתמונה האפורה יש margin: 0 auto אבל היא נשארת בתחילת השורה: margin אוטומטי לא עושה כלום על אלמנט inline. display: block הוא החלק החסר. max-width: 100% יחד עם height: auto מונעים מהתמונה לגלוש ממסך צר ושומרים על הפרופורציות שלה.

שיטה 3: flexbox או grid, כולל מרכוז אנכי

כדי למרכז תמונה בשני הכיוונים בתוך תיבה, תנו לתיבה גובה ומרכזו את התוכן שלה עם grid או flexbox:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center vertically</title>
  <style>
    .box {
      display: grid;
      place-items: center;
      height: 220px;
      background: #f3f4f6;
      border: 1px solid #d1d5db;
    }
  </style>
</head>
<body>
  <div class="box" id="box">
    <img id="img" width="120" height="120" alt="Amber circle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='60' cy='60' r='60' fill='%23f59e0b'/%3E%3C/svg%3E">
  </div>
</body>
</html>

המקבילה ב-flexbox היא display: flex; justify-content: center; align-items: center;. בשני המקרים התיבה צריכה גובה גדול מהתמונה, אחרת אין מקום שבו אפשר למרכז. אותן שיטות ממרכזות כל אלמנט; עמוד מרכוז div משווה את כולן.

מרכוז תמונה עם כיתוב

תמונה עם כיתוב שייכת ל-<figure>. מרכזו את התוכן של ה-figure, והתמונה והכיתוב יתיישרו יחד:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Figure</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    figure {
      margin: 0;
      text-align: center;
    }
    figure img { max-width: 100%; height: auto; }
    figcaption { font-size: 14px; color: #4b5563; margin-top: 6px; }
  </style>
</head>
<body>
  <figure id="fig">
    <img id="img" width="200" height="120" alt="A mountain drawing"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='120'%3E%3Crect width='200' height='120' fill='%23bfdbfe'/%3E%3Cpath d='M0 120L70 40L140 120Z' fill='%2316a34a'/%3E%3Cpath d='M80 120L150 55L200 100V120Z' fill='%2315803d'/%3E%3C/svg%3E">
    <figcaption id="cap">Figure 1. A centered image with its caption.</figcaption>
  </figure>
</body>
</html>

כמה תמונות בשורה ממורכזת

שורה של לוגואים או תמונות ממוזערות היא משימה ל-flexbox. justify-content: center ממרכז את הקבוצה, gap מרווח אותה, ו-flex-wrap מאפשר לה לעבור שורה במסכים קטנים ולהישאר ממורכזת:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Centered row</title>
  <style>
    .row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 12px;
      padding: 12px;
      border: 1px dashed #9ca3af;
    }
  </style>
</head>
<body>
  <div class="row" id="row">
    <img width="80" height="50" alt="Logo one" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='50'%3E%3Crect width='80' height='50' rx='6' fill='%232563eb'/%3E%3C/svg%3E">
    <img width="80" height="50" alt="Logo two" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='50'%3E%3Crect width='80' height='50' rx='6' fill='%2316a34a'/%3E%3C/svg%3E">
    <img width="80" height="50" alt="Logo three" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='50'%3E%3Crect width='80' height='50' rx='6' fill='%23f59e0b'/%3E%3C/svg%3E">
  </div>
</body>
</html>

באיזו שיטה להשתמש

מצב	השתמשו ב
תמונה בפסקה או בבלוק פשוט	`text-align: center` על ההורה
אפשר לעצב רק את התמונה	`display: block; margin: 0 auto;`
מרכוז בשני הכיוונים בתוך תיבה	Grid `place-items: center` (או flexbox) על התיבה
שורה של תמונות	Flexbox עם `justify-content: center`
תמונה עם כיתוב	`<figure>` עם `text-align: center`
תמונת רקע, לא תוכן	`background-position: center`, ראו background-image

הדרכים הישנות, ולמה לא

עדיין תמצאו אותן במדריכים ישנים:

<!-- obsolete: do not use -->
<center><img src="logo.png" alt="Logo"></center>
<img src="logo.png" alt="Logo" align="center">

<center> והתכונה align הוסרו מ-HTML. דפדפנים עדיין מציגים את <center> בשביל תאימות לאחור, ו-align="center" על תמונה אפילו לא ממרכז אותה אופקית: דפדפנים מתייחסים אליו כיישור אנכי בתוך השורה. השתמשו באחת משיטות ה-CSS שלמעלה.

טעויות נפוצות

text-align: center על ה-<img>. שימו אותו על ההורה.
margin: 0 auto על תמונת inline. הוסיפו display: block.
מרכוז אנכי בלי גובה להורה. התיבה מתכווצת לגודל התמונה, ולא נשאר מקום שבו אפשר למרכז.
float: center. אין ערך כזה. float הולך רק לצד אחד.
שכחה של alt. תמונה ממורכזת עדיין צריכה טקסט חלופי; השתמשו ב-alt="" רק לתמונות קישוטיות לגמרי.
תמונה מתוחה. הגדרה של width וגם height ב-CSS לערכים עם יחס שונה מעוותת אותה. הגדירו אחד מהם והשתמשו ב-height: auto, או הוסיפו object-fit: cover.

שאלות נפוצות

איך ממרכזים תמונה ב-HTML?

שמים text-align: center על האלמנט שמכיל אותה, למשל <p style="text-align: center;"><img src="logo.png" alt="Logo"></p>. תמונה היא inline כברירת מחדל, ולכן היא מתמרכזת כמו מילה בטקסט.

איך ממרכזים תמונה עם margin auto?

קודם הופכים את התמונה לבלוק: img { display: block; margin: 0 auto; }. margin אוטומטי לא ממרכז אלמנטי inline, ותמונה היא inline עד שמשנים את זה.

איך ממרכזים תמונה אנכית ואופקית?

הופכים את המכל שלה ל-grid (או flexbox) עם גובה: .box { display: grid; place-items: center; height: 300px; }. התמונה יושבת אז באמצע התיבה.

אפשר להשתמש בתגית <center> או ב-align="center" כדי למרכז תמונה?

לא. <center> והתכונה align על <img> מיושנות ב-HTML5. דפדפנים עדיין מציגים את <center> בשביל עמודים ישנים, אבל align="center" על תמונה מיישר אותה אנכית בתוך השורה, לא אופקית. השתמשו ב-CSS.

למה יש רווח קטן מתחת לתמונה הממורכזת שלי?

תמונת inline יושבת על קו הבסיס של הטקסט, ומשאירה מקום מתחתיה לזנבות של אותיות. הגדירו display: block על התמונה, או vertical-align: middle, והרווח ייעלם.

מושגים קשורים