في لغة CSS، لا توجد خاصية عامة واحدة تُسمى align تُستخدم بشكل مُباشر لمحاذاة العناصر. بدلاً من ذلك، هناك مجموعة من الخصائص تُستخدم لمحاذاة العناصر بأنواعها المختلفة، سواء كانت نصوصًا، عناصر صور، عناصر صندوقية، أو عناصر مرنة (Flexbox). سأشرح لك أهم هذه الخصائص وكيفية استخدامها:

1. محاذاة النصوص (Text Alignment):

تُستخدم الخاصية text-align لمحاذاة النصوص داخل عنصر ما بشكل أفقي.

  • القيم المُمكنة لـ text-align:

    • left: محاذاة النص إلى اليسار (القيمة الافتراضية).
    • right: محاذاة النص إلى اليمين.
    • center: توسيط النص.
    • justify: ضبط النص، حيث يتم توزيع المسافات بين الكلمات لجعل سطور النص متساوية الطول.
    • start: يُحاذي النص إلى بداية اتجاه الكتابة (يسارًا في اللغات التي تُكتب من اليسار إلى اليمين، ويمينًا في اللغات التي تُكتب من اليمين إلى اليسار).
    • end: يُحاذي النص إلى نهاية اتجاه الكتابة.

  • مثال:

CSS
p {
  text-align: center; /* توسيط النص داخل الفقرة */
}

div {
  text-align: right; /* محاذاة النص إلى اليمين داخل div */
}

2. محاذاة العناصر الصندوقية (Box Alignment):

لا تُستخدم text-align لمحاذاة العناصر الصندوقية (مثل div، span، img) بشكل عمودي. لمحاذاة هذه العناصر، نستخدم طرقًا مختلفة، منها:

  • الهوامش التلقائية (Auto Margins): يُمكن توسيط عنصر صندوقي أفقيًا عن طريق تعيين قيمة auto للهوامش الجانبية margin-left و margin-right.
  • جرب الان
CSS
div {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}
  • خاصية vertical-align: تُستخدم لمحاذاة العناصر السطرية (inline) أو عناصر الجدول عموديًا بالنسبة إلى خط الأساس (baseline) للعنصر الأب. لها قيم متعددة مثل top، middle، bottom، baseline، وغيرها.
CSS
img {
  vertical-align: middle; /* توسيط الصورة عموديًا بالنسبة للنص المجاور */
}

  • خاصية display: flex مع align-items و justify-content: تُعتبر هذه الطريقة الأكثر قوة ومرونة لمحاذاة العناصر، خاصةً مع تصميمات الويب الحديثة.

    • align-items: تُستخدم لمحاذاة العناصر على المحور العمودي (المحور المُتقاطع).
    • justify-content: تُستخدم لمحاذاة العناصر على المحور الأفقي (المحور الرئيسي).
    • جرب الان
CSS
.container {
  display: flex;
  align-items: center; /* توسيط العناصر عموديًا */
  justify-content: center; /* توسيط العناصر أفقيًا */
}
  • خاصية display: grid مع align-items و justify-items و place-items و align-content و justify-content و place-content: تُوفر Grid Layout نظامًا قويًا آخر لمحاذاة العناصر في صفوف وأعمدة.

3. محاذاة العناصر المرنة (Flexbox Alignment):

كما ذكرت أعلاه، يُعتبر Flexbox نظامًا قويًا ومرنًا لمحاذاة العناصر. أهم الخصائص المُستخدمة في Flexbox لمحاذاة العناصر هي:

  • justify-content: تُستخدم لمحاذاة العناصر على المحور الرئيسي (عادةً ما يكون أفقيًا). قيمها: flex-start، flex-end، center، space-between، space-around، space-evenly.
  • align-items: تُستخدم لمحاذاة العناصر على المحور المُتقاطع (عادةً ما يكون عموديًا). قيمها: flex-start، flex-end، center، baseline، stretch.
  • align-self: تُستخدم لمحاذاة عنصر واحد داخل حاوية Flexbox بشكل مُنفرد، وتتجاوز قيمة align-items المُطبقة على الحاوية.
  • align-content: تُستخدم لمحاذاة أسطر العناصر في حالة وجود أكثر من سطر في حاوية Flexbox.

4. محاذاة عناصر Grid (Grid Layout Alignment):

يُوفر Grid Layout نظامًا مُتقدمًا لمحاذاة العناصر في صفوف وأعمدة. أهم الخصائص المُستخدمة في Grid لمحاذاة العناصر هي:

  • justify-items: تُستخدم لمحاذاة العناصر داخل خلايا الشبكة على المحور الأفقي.
  • align-items: تُستخدم لمحاذاة العناصر داخل خلايا الشبكة على المحور العمودي.
  • justify-content: تُستخدم لمحاذاة مساحة الشبكة نفسها على المحور الأفقي داخل حاوية الشبكة.
  • align-content: تُستخدم لمحاذاة مساحة الشبكة نفسها على المحور العمودي داخل حاوية الشبكة.
  • place-items: خاصية مُختصرة لـ align-items و justify-items.
  • place-content: خاصية مُختصرة لـ align-content و justify-content.

باختصار، لا توجد خاصية align مُستقلة في CSS. بدلاً من ذلك، هناك مجموعة من الخصائص تُستخدم لمحاذاة العناصر بأنواعها المختلفة، ويعتمد اختيار الخاصية المُناسبة على نوع العنصر وطريقة عرضه. يُعتبر استخدام Flexbox و Grid Layout من أفضل وأقوى الطرق لمحاذاة العناصر في تصميمات الويب الحديثة.