هل يمكن استخدام الوسم أو align="center" لتوسيط صورة؟

لا. الوسم والسمة align على ملغيان في HTML5. ما زالت المتصفحات تعرض للصفحات القديمة، لكن align="center" على الصورة تحاذيها عموديًا في السطر لا أفقيًا. استخدم CSS.

وثائق CSS قابلة للتشغيل: توسيط صورة

Q: كيف أوسّط صورة في HTML؟

ضع text-align: center على العنصر الذي يحتويها، مثلًا . الصورة سطرية افتراضيًا، فتتوسط ككلمة من النص.

Q: كيف أوسّط صورة باستخدام margin auto؟

اجعل الصورة عنصرًا كتليًا أولًا: img { display: block; margin: 0 auto; }. الهوامش التلقائية لا توسّط العناصر السطرية، والصورة سطرية حتى تغيّر ذلك.

Q: كيف أوسّط صورة عموديًا وأفقيًا؟

اجعل حاويتها grid (أو flexbox) بارتفاع محدد: .box { display: grid; place-items: center; height: 300px; }. عندها تقع الصورة في منتصف الصندوق.

الإجابة السريعة: text-align على الأب

العنصر <img> عنصر سطري: يقع في سطر النص ككلمة. لذلك توسّطه بالطريقة نفسها التي توسّط بها النص، عبر 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

إن فضّلت تنسيق الصورة نفسها، حوّلها إلى عنصر كتلي وأعطها هوامش جانبية تلقائية. تُقسم المساحة الحرة على الجانبين بالتساوي:

<!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 لكنها تبقى في بداية السطر: الهوامش التلقائية لا تفعل شيئًا على عنصر سطري. 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 على صورة سطرية. أضف display: block.
التوسيط العمودي من دون ارتفاع للأب. يتقلص الصندوق إلى حجم الصورة، فلا تبقى مساحة للتوسيط.
float: center. لا توجد قيمة كهذه. العناصر العائمة تذهب إلى أحد الجانبين فقط.
نسيان 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>. الصورة سطرية افتراضيًا، فتتوسط ككلمة من النص.

كيف أوسّط صورة باستخدام margin auto؟

اجعل الصورة عنصرًا كتليًا أولًا: img { display: block; margin: 0 auto; }. الهوامش التلقائية لا توسّط العناصر السطرية، والصورة سطرية حتى تغيّر ذلك.

كيف أوسّط صورة عموديًا وأفقيًا؟

اجعل حاويتها grid (أو flexbox) بارتفاع محدد: .box { display: grid; place-items: center; height: 300px; }. عندها تقع الصورة في منتصف الصندوق.

هل يمكن استخدام الوسم <center> أو align="center" لتوسيط صورة؟

لا. الوسم <center> والسمة align على <img> ملغيان في HTML5. ما زالت المتصفحات تعرض <center> للصفحات القديمة، لكن align="center" على الصورة تحاذيها عموديًا في السطر لا أفقيًا. استخدم CSS.

لماذا توجد فجوة صغيرة تحت الصورة الموسّطة؟

الصورة السطرية تقع على خط أساس النص، تاركة مساحة تحتها للأجزاء النازلة من الحروف. اضبط display: block على الصورة، أو vertical-align: middle، فتختفي الفجوة.

مفاهيم ذات صلة