انحياز عمودي

يمكنك بسهولة تغيير المحاذاة الرأسية لعناصر الخلية المضمنة والمضمنة والجدول المضمنة والجدول.

قم بتغيير محاذاة العناصر مع vertical-alignmentالأدوات المساعدة. يرجى ملاحظة أن المحاذاة الرأسية تؤثر فقط على عناصر الخلية المضمنة والمضمنة والجدول المضمنة والجدول.

اختر من .align-baseline، .align-top، .align-middle، .align-bottom، .align-text-bottomوحسب .align-text-topالحاجة.

لتوسيط المحتوى غير المضمّن رأسياً (مثل <div>s والمزيد) ، استخدم أدوات Flex box المساعدة .

مع العناصر المضمنة:

خط الأساس أعلى النص أسفل النص أعلى النص أسفل الخط الأساسي

<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>

مع خلايا الجدول:

حدود

أعلى

وسط

الأسفل

نص أعلى

نص أسفل

<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>

ساس

واجهة برمجة تطبيقات المرافق

يتم الإعلان عن أدوات المحاذاة الرأسية في واجهة برمجة تطبيقات المرافق الخاصة بنا في scss/_utilities.scss. تعرف على كيفية استخدام واجهة برمجة تطبيقات المرافق.

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