Fa'aoga tu'usa'o

Fa'afaigofie ona sui le fa'aoga tu'usa'o o elemene i totonu, laina-poloka, laina-la'au ma le laulau.

Suia le fa'aogaina o elemene ma vertical-alignmentmea aoga. Fa'amolemole maitau e na'o le fa'aoga-tusa'o e fa'aoga i totonu, poloka-poloka, laina-laina, ma elemene sela o le laulau.

Filifili mai .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, ma .align-text-toppe a manaʻomia.

Ina ia fa'atotonu fa'aogatotonu mea e le i totonu (pei o <div>s ma sili atu), fa'aoga a matou mea fa'aoga pusa flex .

Faatasi ai ma elemene i totonu:

laina faavae pito i luga ogatotonu pito i lalo tusitusiga-pito i luga tusitusiga-lalo

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>

Faatasi ai ma sela laulau:

laina faavae

pito i luga

ogatotonu

pito i lalo

tusitusiga-pito i luga

pito i lalo

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

O lo'o fa'ailoa mai fa'aoga fa'aoga tu'usa'o i totonu ole matou fa'aoga API i scss/_utilities.scss. A'oa'o pe fa'afefea ona fa'aoga mea aoga API.

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