مقدمه

ویژگی vertical-align در CSS برای تعیین تراز عمودی عناصر درون‌خطی (Inline Elements) یا محتوای سلول‌های جدول (Table Cells) استفاده می‌شود.

این ویژگی مشخص می‌کند که یک عنصر نسبت به سایر عناصر موجود در همان خط چگونه به صورت عمودی قرار بگیرد.

نحوه استفاده

ویژگی vertical-align می‌تواند یکی از موارد زیر را دریافت کند:

• یک مقدار عددی بر حسب طول (px, em, rem و …)
• یک مقدار درصدی (%)
• یکی از 8 مقدار کلیدی (Keyword)

نمونه:

.avatar {
  vertical-align: middle;
}

در این مثال عنصر دارای کلاس avatar در وسط خط قرار می‌گیرد.

مقادیر مختلف vertical-align

1. baseline (پیش‌فرض)

خط مبنای (Baseline) عنصر با خط مبنای عنصر والد هم‌تراز می‌شود.

vertical-align: baseline;

این مقدار حالت پیش‌فرض مرورگر است.

مثال:

Sammy sells seashells 🐚 by the seashore.

2. bottom

پایین‌ترین بخش عنصر با پایین‌ترین قسمت خط هم‌تراز می‌شود.

vertical-align: bottom;

مناسب زمانی است که بخواهید عنصر به انتهای خط بچسبد.

3. middle

عنصر در مرکز عمودی خط قرار می‌گیرد.

vertical-align: middle;

این مقدار یکی از پرکاربردترین حالت‌ها برای هم‌تراز کردن آیکون‌ها و تصاویر کنار متن است.

مثال:

img {
  vertical-align: middle;
}

4. sub

عنصر مانند زیرنویس (Subscript) نمایش داده می‌شود.

vertical-align: sub;

نمونه کاربرد:

H₂O

5. super

عنصر مانند بالانویس (Superscript) نمایش داده می‌شود.

vertical-align: super;

نمونه کاربرد:

x²

6. text-bottom

پایین عنصر با پایین متن هم‌تراز می‌شود.

vertical-align: text-bottom;

7. text-top

بالای عنصر با بالای متن هم‌تراز می‌شود.

vertical-align: text-top;

8. top

بالای عنصر با بالای خط هم‌تراز می‌شود.

vertical-align: top;

برای چسباندن عناصر به قسمت بالایی خط استفاده می‌شود.

استفاده از مقدار عددی

می‌توانید فاصله عنصر را نسبت به خط مبنا به صورت دستی تعیین کنید.

مثال:

.icon {
  vertical-align: 10px;
}

در این حالت عنصر 10 پیکسل بالاتر از خط مبنا قرار می‌گیرد.

استفاده از درصد

همچنین می‌توان از درصد استفاده کرد:

.icon {
  vertical-align: 20%;
}

درصد بر اساس مقدار line-height محاسبه می‌شود.

کاربردهای رایج vertical-align

هم‌تراز کردن آیکون با متن

.icon {
  vertical-align: middle;
}

هم‌تراز کردن تصویر کنار متن

img {
  vertical-align: middle;
}

تنظیم موقعیت فرمول‌های ریاضی

.sub {
  vertical-align: sub;
}

.super {
  vertical-align: super;
}

نکته مهم

بسیاری از برنامه‌نویسان تصور می‌کنند vertical-align برای وسط‌چین کردن عناصر Block مانند div کاربرد دارد؛ اما این تصور اشتباه است.

ویژگی vertical-align فقط روی موارد زیر اثر دارد:

• عناصر Inline
• عناصر Inline-block
• سلول‌های جدول (table-cell)

برای وسط‌چین کردن یک div معمولاً از روش‌های زیر استفاده می‌شود:

display: flex;
align-items: center;
justify-content: center;

یا:

display: grid;
place-items: center;

جمع‌بندی

ویژگی vertical-align برای کنترل تراز عمودی عناصر درون‌خطی و سلول‌های جدول استفاده می‌شود. پرکاربردترین مقدار آن middle است که معمولاً برای هم‌تراز کردن تصاویر و آیکون‌ها با متن به کار می‌رود. سایر مقادیر مانند top، bottom، sub و super نیز برای تنظیم دقیق موقعیت عناصر در خط کاربرد دارند.

از همراهی شما با پارمین کلود سپاسگزاریم.