Tlolela go diteng tše kgolo Tlolela go docs navigation
Check
in English

Go logaganya ga go ema thwii

Fetoša gabonolo go logaganya ga go ema ga dielemente tša sele ya ka gare ga mothaladi, ka gare ga mothaladi-boloko, tafola ya ka gare ga mothaladi, le tafola.

Fetola lolamisiwa ga elements le vertical-alignmentutilities. Hle ela hloko gore vertical-align e ama fela inline, inline-block, inline-table, le dielemente tša sele ya tafola.

Kgetha go tšwa go .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, le .align-text-topge go nyakega.

Go tsepamiša diteng tšeo e sego tša ka gare ga mothaladi ka go otlologa (go swana le <div>s le tše dingwe), diriša didirišwa tša rena tša lepokisi la go kobega .

Ka dielemente tša ka gare ga mothaladi:

motheo godimo bogareng tlase sengwalwa-godimo sengwalwa-fase
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>

Ka disele tša tafola:

motheo godimo bogareng tlase sengwalwa-godimo sengwalwa-tlase
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>

Sass

API ya Didirišwa

Didirišwa tša go logaganya thwii di tsebagaditšwe ka go API ya rena ya didirišwa ka scss/_utilities.scss. Ithute kamoo o ka dirišago API ya didirišwa.

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