דלג לתוכן הראשי דלג לניווט במסמכים
Check
in English

יישור אנכי

שנה בקלות את היישור האנכי של רכיבי תא מוטבע, בלוק מוטבע, טבלה מוטבעת ורכיבי תא טבלה.

שנה את היישור של אלמנטים עם vertical-alignmentכלי השירות. לידיעתך, יישור אנכי משפיע רק על רכיבי תא מוטבע, בלוק מוטבע, טבלה מוטבעת ותא טבלה.

בחר מתוך .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, ולפי .align-text-topהצורך.

כדי למרכז אנכית תוכן שאינו מוטבע (כמו <div>s ועוד), השתמש בכלי השירות flex box שלנו .

עם אלמנטים מוטבעים:

קו בסיס עליון באמצע תחתון טקסט-עליון טקסט-תחתון
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>

סאס

API של Utilities

כלי עזר ליישור אנכי מוצהרים ב-API של השירותים שלנו ב- scss/_utilities.scss. למד כיצד להשתמש בממשק ה-API של השירותים.

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