📌 این ویژگی مشخص می‌کنه که یک عنصر در امتداد محور عمودی نسبت به خط متن یا عنصر والد قرار بگیره.
در Tailwind از کلاس‌های align-* استفاده می‌کنیم.

✅ کلاس‌ها

• align-baseline → تراز با خط پایه متن (پیش‌فرض)

• align-top → بالا تراز می‌شود

• align-middle → وسط تراز می‌شود

• align-bottom → پایین تراز می‌شود

• align-text-top → بالای خط متن

• align-text-bottom → پایین خط متن

✅ مثال

<span class="align-baseline border mb-2">Baseline</span>
<span class="align-top border mb-2">Top</span>
<span class="align-middle border mb-2">Middle</span>
<span class="align-bottom border mb-2">Bottom</span>
<span class="align-text-top border mb-2">Text Top</span>
<span class="align-text-bottom border mb-2">Text Bottom</span>

📌 نکات مهم

• این کلاس‌ها بیشتر روی عناصر inline یا inline-block کاربرد دارند.

• برای عناصر بلوکی معمولاً باید از flex یا grid استفاده کرد تا تراز عمودی دقیق کنترل شود.

• می‌توان با responsive ترکیب کرد:

  • sm:align-top md:align-middle