vertical-align

ویژگی vertical-align به ما کمک می کند تا عناصر خطی چیده شده در کنار هم را نسبت به راستای عمود تراز بندی کنیم.

عناصر خطی شامل متن، تصویر، دکمه و هر عنصری که display آن از نوع inline یا inline-block است، می باشند.

همچنین از این عنصر جهت ترازبندی عمودی محتوای داخل خانه های عنصر جدول یا هر عنصری که display آن از نوع table-cell است، استفاده می شود.

بصورت پیشفرض عناصر خطی در کنار هم نسبت به baseline یا همان خط مبنای عنصر، تراز می شوند. یعنی اگر تصویری در کنار یک متن داشته باشیم پایین عنصر تصویر با خط مبنای نوشته در یک راستا خواهد بود. حال اگر خواسته باشیم تا تصویر نسبت به متن در وسط راستای عمود قرار بگیرد چه؟ با استفاده از این ویژگی و مقادیر مربوط به آن می توان این موضوع را کنترل کرد.

مقادیر ویژگی vertical-align

vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit

برای هر یک از مقادیر زیر مثالی آورده شده است که در مثال مورد نظر ویژگی vertical-align را به تصویر خطی موجود می دهیم. در کنار تصویر، متن عنصر نگهدارنده وجود دارند که محدوده عنصر نگهدارنده را با استفاده از خط چین مشخص می کنیم. همچنین خطی که قرار است با توجه به آن تصویر تراز شود را با رنگ قرمز نمایش می دهیم.

HTML مثال بصورت زیر می باشد:

<div>
  <img src="test.png" alt="test image">
  this is the test text.
</div>

baseline

این مقدار همان مقدار پیشفرض و اولیه می باشد که خط مبنای عنصر را با خط مبنای عنصر نگهدارنده تراز می کند. اگر عنصر خط مبنا نداشته باشد لبه margin پایین عنصر را با خط مبنای عنصر نگهدارنده یکی می کند.

middle

img {
  vertical-align: middle;  
}

این مقدار مرکز عمودی عنصر را با خط مبنا بعلاوه نصف ارتفاع کاراکتر X مربوط به فونت مورد استفاده را با هم تراز می کند:

sub

این مقدار باعث می شود تا خط مبنای عنصر تا موقعیت پایین‌نویس پایین بیاید:

super

این مقدار باعث می شود تا خط مبنای عنصر تا موقعیت بالانویس بالا برود:

text-top

این مقدار بالای عنصر را با خط بالای حروف محتوا یکی می کند. توجه داشته باشیم که اگر برای محتوا از چندین فونت استفاده شده باشد خط فونتی تعیین کننده است که از همه بالاتر قرار می گیرد:

text-bottom

این مقدار پایین عنصر را با خط پایین حروف محتوا یکی می کند. توجه داشته باشیم که اگر برای محتوا از چندین فونت استفاده شده باشد خط فونتی تعیین کننده است که از همه پایین تر قرار می گیرد:

top

این مقدار بالای عنصر را با بالاترین لبه خط موجود یکی می کند. یعنی اگر در همان خط مثلا تصویر بزرگتری وجود داشته باشد که ارتفاع آن خط را افزایش دهد بالای عنصر با آن ارتفاع تنظیم می شود:

همچنین اگر در آن خط line-height به اندازه ای باشد که ارتفاع محتوا را افزایش دهد عنصر با آن ارتفاع تنظیم می شود:

bottom

این مقدار پایین عنصر را با پایین ترین لبه خط موجود یکی می کند. در تصویر زیر چون line-height تعیین نشده است این مقدار شبیه به text-bottom عمل می کند:

اما ویژگی line-height می توان خط را پایین تر ببرد:

مقدار درصدی

فرض کنید مقدار %50 را در نظر گرفته ایم. چون مقدار مثبت است خط تراز به اندازه 50 درصد مقدار line-height نسبت به خط مبنا بالا می رود و اگر مقدار منفی باشد بالعکس:

div {
  line-height: 100px;
}

img {
  vertical-align: 50%;
}

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

مقدار طولی

به همان مقداری که تعیین می شود خط تراز نسبت به خط مبنا بالا می رود اگر مقدار تعیین شده مثبت باشد. در غیر این صورت اگر مقدار منفی باشد خط تراز به سمت پایین خط مبنا حرکت می کند. مقدار صفر خط تراز را در موقعیت خط مبنا قرار می دهد:

inherit

با استفاده کلمه کلیدی inherit مقدار این ویژگی از عنصر پدر به ارث می رسد.

مثال

در دموی زیر مقدار این ویژگی را تغییر دهید و نتیجه هر کدام را بررسی کنید:

See the Pen vertical-align by Mojtaba Seyedi (@seyedi) on CodePen.

تراز کردن عمودی محتوای جدول

این ویژگی همچنین می تواند محتوای خانه های جدول را تراز کند.

<table>
  <tr>
    <td>Lorem ipsum dolor sit amet, expedita obcaecati.</td>
    <td>
      Lorem ipsum dolor sit amet, conitationem doloribus! Sint non rem repellendus.
    </td>
  </tr>
</table>

td {
  vertical-align: top;
}

See the Pen table and vertical-align by Mojtaba Seyedi (@seyedi) on CodePen.

وسط قرار دادن عمودی محتوای عناصر بلاک

گاهی می توان به عنوان یک ترفند عناصر نوع بلاک را به نوع سلول جدول تبدیل کرد و محتوای آنها را در راستای عمود در وسط قرار داد:

div {
  display: table-cell;
  vertical-align: middle;
}

See the Pen table-cell by Mojtaba Seyedi (@seyedi) on CodePen.

خیلی از مواقع تعیین کردن عنصر بلاک به عنوان نوع سلول جدول می توان آرایش و چیدمان عناصر را از حالتی که نیاز داریم خارج کند. پس همیشه این روش نمی تواند کاربردی باشد.

در مطلب وسط قرار دادن عناصر در سی اس اس با روش های بیشتری در رابطه با این موضوع آشنا می شویم.