Tsepamiso e otlolohileng

Fetola ha bonolo tekamano e emeng ea inline, inline-block, inline-tafole le likarolo tsa lisele tsa tafole.

Fetola tumellano ea likarolo le vertical-alignmentlisebelisoa. Ka kopo elelloa hore ho lokisoa ho ea holimo ho ama feela inline, inline-block, inline-tafole, le likarolo tsa lisele tsa tafole.

Khetha ho .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, le .align-text-topkamoo ho hlokahalang.

Ho beha litaba tse sa thekeseleng sebakeng se otlolohileng (joalo <div>ka s le tse ling), sebelisa lisebelisoa tsa rona tsa flex box .

E na le lintlha tsa inline:

mongolo - tlase - tlase-tlase- tlase mongolo -tlase

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 lisele tsa tafole:

motheo

holimo

bohareng

tlase

mongolo-holimo

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

Utilities API

Lisebelisuoa tsa vertical align li phatlalatsoa ho lits'ebeletso tsa rona tsa API ho scss/_utilities.scss. Ithute ho sebelisa lisebelisoa tsa API.

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