1️⃣ align-items

ویژگی مربوط به Flexbox و Grid هست.
کارش مشخص کردن ترازبندی عمودی آیتم‌ها درون کانتینره.

.container {
  display: flex;
  align-items: center; /* مقدارها: flex-start, flex-end, center, baseline, stretch */
}

2️⃣ align-self

برای ترازبندی یک آیتم خاص استفاده می‌شه.
این ویژگی مقدار align-items رو برای اون آیتم override می‌کنه.

.item {
  align-self: flex-end;
}

3️⃣ align-content

وقتی چند خط در flex یا grid داشته باشیم، ترازبندی اون خطوط رو کنترل می‌کنه.

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between; /* مقدارها: flex-start, flex-end, center, space-between, space-around, stretch */
}

4️⃣ text-align (خیلی رایج 🔥)

این یکی ربطی به Flex یا Grid نداره. برای ترازبندی متن داخل عنصر استفاده می‌شه.

p {
  text-align: center; /* مقدارها: left, right, center, justify */
}

5️⃣ vertical-align

این یکی برای عناصر inline یا table-cell کاربرد داره. متن یا عنصر رو به صورت عمودی تراز می‌کنه.

span {
  vertical-align: middle; /* مقدارها: baseline, top, middle, bottom */
}

✅ خلاصه:

• align-items, align-self, align-content → مخصوص Flex/Grid

• text-align → مخصوص تراز افقی متن

• vertical-align → مخصوص عناصر inline یا جدول