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