Fandrindrana mitsangana

Ovay mora foana ny fampifanarahana mitsangana amin'ny singa selan'ny inline, inline-block, inline-table, ary ny sela.

Hanova ny fampifanarahana ny singa amin'ny vertical-alignmentfitaovana. Azafady, mariho fa ny fampifanarahana mitsangana dia tsy misy fiantraikany afa-tsy amin'ny singa inline, inline-block, inline-table, ary ny cell cellule.

Mifidiana amin'ny .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, ary .align-text-topraha ilaina.

Mba hampifantoka ny votoaty tsy an-tserasera mitsangana (toy ny <div>s sy ny maro hafa), ampiasao ny fitaovana flex box anay .

Miaraka amin'ny singa inline:

baseline ambony afovoany ambany lahatsoratra-top text-ambany

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>

Miaraka amin'ny sela latabatra:

fototra

ambony

MOYEN-

ambany

text-top

soratra-ambany

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

Ny fitaovana fampifanarahana mitsangana dia nambara ao amin'ny API fampiasantsika ao amin'ny scss/_utilities.scss. Ianaro ny fomba fampiasana ny utility API.

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