align
1️⃣ align-items
ویژگی مربوط به Flexbox و Grid هست.
کارش مشخص کردن ترازبندی عمودی آیتمها درون کانتینره.
2️⃣ align-self
برای ترازبندی یک آیتم خاص استفاده میشه.
این ویژگی مقدار align-items
رو برای اون آیتم override میکنه.
3️⃣ align-content
وقتی چند خط در flex یا grid داشته باشیم، ترازبندی اون خطوط رو کنترل میکنه.
4️⃣ text-align (خیلی رایج 🔥)
این یکی ربطی به Flex یا Grid نداره. برای ترازبندی متن داخل عنصر استفاده میشه.
5️⃣ vertical-align
این یکی برای عناصر inline یا table-cell کاربرد داره. متن یا عنصر رو به صورت عمودی تراز میکنه.
✅ خلاصه:
-
align-items
,align-self
,align-content
→ مخصوص Flex/Grid -
text-align
→ مخصوص تراز افقی متن -
vertical-align
→ مخصوص عناصر inline یا جدول