توسيط العناصر في HTML وCSS: دليل شامل للمحاذاة الأفقية والعمودية

Updated يونيو 14, 2026 5 min read

Aldawsari

دقائق القراءة: 5

في عالم تطوير الويب، الذي يجمع بين لغتي HTML وCSS، يُعد هيكل التخطيط وتوزيع العناصر من أهم الركائز. نستخدم HTML عادةً لتحديد بنية المحتوى وترميزه، بينما تساعدنا CSS في التحكم في الأنماط ومحاذاة العناصر. في هذا المقال، سنتعمق في استكشاف الطرق المختلفة التي يمكننا من خلالها توسيط عناصر HTML والتعامل مع المحاذاة العمودية باستخدام CSS.

سنبدأ بتعلم كيفية محاذاة النصوص باستخدام CSS، ثم ننتقل إلى كيفية محاذاة عنصر div وأي عناصر أخرى. وأخيرًا، سنتعلم كيف يمكننا وضع النصوص وعنصر div معًا داخل حاوية واحدة.

كيفية توسيط النصوص في CSS

هناك عدة طرق لتوسيط النصوص باستخدام CSS، وكل منها يقدم حلاً مختلفًا حسب السياق المطلوب.

استخدام خاصية `float` للمحاذاة

تُعد خاصية float طريقة سهلة لمحاذاة النصوص. لوضع النص على الجانب الأيمن من التخطيط، يمكننا ببساطة استخدام القيمة right لخاصية float. ولوضع النص على الجانب الأيسر، نستخدم القيمة left، مثل float: left;. إليك مثال يوضح ذلك:

.right {
  float: right;
}
.left {
  float: left;
}

<!-- HTML -->
<span class="right">نص على اليمين</span>
<span class="left">نص على اليسار</span>

لتوسيط النص باستخدام float، يمكننا الاستفادة من الخاصيتين margin-left أو margin-right وتعيين قيمتهما إلى 50%، كما هو موضح أدناه:

.center {
  float: left;
  margin-left: 50%;
}

<!-- HTML -->
<span class="center">نص في المنتصف</span>

تجدر الإشارة إلى أن استخدام float لتوسيط العناصر قد يكون أقل مرونة في بعض السيناريوهات الحديثة، وهناك طرق أخرى أكثر فعالية سنتناولها لاحقًا.

استخدام خاصية `text-align` لتوسيط النصوص

تُعد خاصية text-align طريقة أكثر ملاءمة وتحديدًا لمحاذاة النصوص. تتيح لنا هذه الخاصية وضع النص في center (المنتصف) أو left (اليسار) أو right (اليمين)، كما يوضح المثال التالي:

.right {
  text-align: right;
}
.left {
  text-align: left;
}
.center {
  text-align: center;
}

<!-- HTML -->
<p class="right">نص على اليمين</p>
<p class="center">نص في المنتصف</p>
<p class="left">نص على اليسار</p>

تُعد text-align الخيار الأمثل لتوسيط الكتل النصية داخل عنصرها الأب، وهي مدعومة بشكل واسع في جميع المتصفحات.

كيفية محاذاة عنصر `div`

هناك العديد من الطرق لمحاذاة عناصر div، وكما استخدمنا float لمحاذاة النصوص، يمكننا استخدامها لمحاذاة عنصر div أيضًا. ومع ذلك، بينما تؤدي float الغرض، فإن CSS توفر لنا خيارات أفضل وأكثر ملاءمة وأناقة، مثل Flexbox وCSS Grid. هاتان الطريقتان الحديثتان توفران أساليب متطورة للتعامل مع التخطيطات والمحاذاة في CSS. دعنا نلقي نظرة فاحصة على Flexbox.

استخدام `Flexbox` لمحاذاة العناصر

توفر Flexbox طريقة سهلة ومباشرة لمحاذاة عناصر div – وهي إحدى الطرق المفضلة لدي للتعامل مع التخطيطات في CSS (أستخدمها يوميًا). لنلقِ نظرة على كيفية استخدام Flexbox من خلال إعادة إنشاء نفس المثال السابق:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Flexbox Alignment</title>
  <style>
    .container {
      display: flex;
      border: 2px solid #333;
      padding: 10px;
      margin-bottom: 20px;
    }
    .container div {
      width: 30%; /* Adjust width for better spacing */
      height: 60px;
      display: flex; /* To center text inside the div */
      justify-content: center; /* To center text horizontally */
      align-items: center; /* To center text vertically */
      color: white;
      font-weight: bold;
      border-radius: 5px;
      margin: 0 5px; /* Add some margin between divs */
    }
    .left {
      background: #ffc107; /* Yellow */
    }
    .right {
      background: #dc3545; /* Red */
    }
    .center {
      background: #007bff; /* Light Blue */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">عنصر يسار</div>
    <div class="center">عنصر في المنتصف</div>
    <div class="right">عنصر يمين</div>
  </div>
</body>
</html>

شرح مفصل لـ `Flexbox`

لفهم كيفية عمل Flexbox، دعنا نقوم بتحليل المثال السابق خطوة بخطوة:

تعريف الحاوية المرنة: نبدأ دائمًا بتعريف العنصر الأب (div parent) كحاوية مرنة باستخدام الخاصية display: flex;. هذا يجعل جميع العناصر الأبناء (div's children) داخل هذه الحاوية قابلة للتحكم باستخدام خصائص Flexbox.
اتجاه العناصر: تستخدم خاصية flex-direction الاتجاه row (صف) افتراضيًا، مما يعني أن العناصر ستُوضع أفقيًا داخل الحاوية. يمكن تغيير هذا إلى column (عمود) لترتيب العناصر عموديًا.
محاذاة المحتوى (أفقيًا): باستخدام خاصية justify-content، يمكننا محاذاة العناصر الأبناء (div's children) في اتجاهات مختلفة داخل الحاوية، كما يوضح المثال التالي:

.container {
  display: flex;
  justify-content: center; /* flex-start, flex-end, space-between, space-evenly, space-around, etc. */
}

justify-content: center;: يضع العناصر في منتصف الحاوية.
justify-content: flex-start;: يضع العناصر في بداية الحاوية (عادةً على اليسار في اتجاه row).
justify-content: flex-end;: يضع العناصر في نهاية الحاوية (عادةً على اليمين في اتجاه row).
justify-content: space-around;: يجعل العناصر تتناسب مع الحاوية ويضع فجوة متساوية حول جميع العناصر (أي مسافة متساوية قبل العنصر الأول وبعد الأخير، ومسافات مضاعفة بين العناصر).
justify-content: space-evenly;: يوزع العناصر داخل الحاوية الأب بالتساوي مع نفس المسافة بينها وبين الحواف.
justify-content: space-between;: يوزع العناصر بحيث يكون العنصر الأول في البداية والأخير في النهاية، وتتوزع المسافات المتبقية بالتساوي بين العناصر الأخرى.

تُطبق الأمثلة المذكورة أعلاه على جميع العناصر الأبناء كمجموعة واحدة. ولكن ماذا لو أردنا محاذاة عنصر div واحد فقط داخل الحاوية؟

يمكننا دائمًا استخدام خاصية align-self لمحاذاة عنصر واحد بشكل فردي، متجاوزًا قيمة align-items المطبقة على الحاوية الأب:

.container div {
  align-self: center; /* يمكن أن تأخذ القيم: flex-start, flex-end, stretch, baseline */
}

يمكننا تطبيق نفس المفهوم على النصوص باستخدام Flexbox، كما في المثال التالي الذي يوضح كيفية محاذاة النص داخل عنصر div:

<style>
  .right-aligned-text-container {
    display: flex;
    align-items: flex-end; /* لمحاذاة النص عمودياً إلى الأسفل */
    justify-content: flex-end; /* لمحاذاة النص أفقياً إلى اليمين */
    flex-direction: column; /* لجعل النص يأخذ عرض الحاوية ويتم محاذاته كعمود */
    height: 100px; /* لتوضيح المحاذاة العمودية */
    border: 1px solid #ccc;
    padding: 10px;
  }
</style>
<div class="right-aligned-text-container">
  <span>نص محاذى لليمين والأسفل</span>
</div>

الخلاصة التقنية

تُظهر رحلتنا في عالم توسيط العناصر في HTML وCSS أن هناك طرقًا متعددة لتحقيق نفس الهدف، تتراوح بين الأساليب التقليدية مثل float وtext-align، وصولًا إلى الحلول الحديثة والقوية مثل Flexbox. في حين أن float وtext-align لا تزال مفيدة لسيناريوهات محددة (خاصة محاذاة النصوص)، فإن Flexbox تقدم نظامًا أكثر مرونة وقوة للتحكم في التخطيطات أحادية البعد، مما يجعلها الخيار المفضل للمطورين المعاصرين. إن فهم هذه الأدوات واختيار الأنسب منها لكل مهمة هو مفتاح بناء واجهات مستخدم متجاوبة وجمالية. الممارسة المستمرة وتجربة الأمثلة المختلفة ستعزز فهمك وتثبت هذه المفاهيم في ذهنك، مما يمكنك من التعامل مع تحديات التخطيط بثقة وفعالية.

كيفية توسيط النصوص في CSS

استخدام خاصية float للمحاذاة

استخدام خاصية text-align لتوسيط النصوص

كيفية محاذاة عنصر div

استخدام Flexbox لمحاذاة العناصر

شرح مفصل لـ Flexbox