چیدمان عمودی

تراز عمودی عناصر سلولی درون خطی، بلوک درون خطی، جدول درون خطی و سلول جدول را به راحتی تغییر دهید.

تراز عناصر را با برنامه های vertical-alignmentکاربردی تغییر دهید. لطفاً توجه داشته باشید که تراز عمودی فقط بر عناصر درون خطی، بلوک درون خطی، جدول درون خطی و سلول های جدول تأثیر می گذارد.

از .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, و .align-text-topدر صورت نیاز انتخاب کنید.

برای وسط عمودی محتوای غیرخطی (مانند <div>s و بیشتر)، از ابزارهای انعطاف پذیر ما استفاده کنید .

با عناصر درون خطی:

خط پایه بالا وسط پایین متن بالا متن پایین

html

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

با سلول های جدول:

خط پایه

بالا

وسط

پایین

متن بالا

متن-پایین

html

<table style="height: 100px;">
  <tbody>
    <tr>
      <td class="align-baseline">baseline</td>
      <td class="align-top">top</td>
      <td class="align-middle">middle</td>
      <td class="align-bottom">bottom</td>
      <td class="align-text-top">text-top</td>
      <td class="align-text-bottom">text-bottom</td>
    </tr>
  </tbody>
</table>

ساس

Utilities API

ابزارهای تراز عمودی در API ابزارهای ما در اعلان شده اند scss/_utilities.scss. با نحوه استفاده از Utilities API آشنا شوید.

    "align": (
      property: vertical-align,
      class: align,
      values: baseline top middle bottom text-bottom text-top
    ),