align

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 یا جدول