CSS - Align محاذاة العناصر

CSS - محاذاة العناصر (Align)

🔸 في CSS، يمكننا محاذاة العناصر أفقياً وعموديًا باستخدام خصائص مختلفة حسب نوع العنصر (block أو inline) والحاوية التي يحتويها.

🔹 محاذاة النص باستخدام text-align

تُستخدم خاصية text-align لمحاذاة محتوى العنصر (عادة النصوص) أفقياً داخل العنصر.

.center {
  text-align: center;
}

.right {
  text-align: right;
}

<div class="center">هذا النص في الوسط</div>
<div class="right">هذا النص في اليمين</div>

🔹 محاذاة عنصر Block داخل عنصر أب

لعنصر block مثل <div>، نستخدم خاصية margin مع auto لمحاذاته أفقياً داخل العنصر الأب.

.center-block {
  width: 50%;
  margin: auto;
}

<div class="center-block">عنصر في المنتصف أفقيًا</div>

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

استخدام display: flex هو طريقة حديثة وفعالة لمحاذاة العناصر بكل سهولة أفقيًا وعموديًا.

.container {
  display: flex;
  justify-content: center;  /* محاذاة أفقية */
  align-items: center;      /* محاذاة عمودية */
  height: 200px;
  border: 1px solid gray;
}

<div class="container">
  <div>عنصر في المنتصف تمامًا</div>
</div>

📌 ملاحظات هامة

• استخدم text-align للعناصر النصية أو العناصر inline.
• استخدم margin: auto; للعناصر block لتوسيطها أفقيًا.
• استخدم Flexbox لتوسيط أي عنصر أفقيًا وعموديًا بطريقة حديثة وفعالة.
• للمحاذاة العمودية في العناصر النصية، يمكن استخدام line-height إذا كان النص في سطر واحد.