Hoʻopololei pololei

E hoʻololi maʻalahi i ka hoʻopololei kū ʻana o nā mea ʻeleʻele inline, inline-block, inline-table, a me ka papa.

E hoʻololi i ka alignment o nā mea me nā vertical-alignmentpono. E ʻoluʻolu e hoʻomaopopo i ka pili ʻana o ka vertical-align wale nō i nā mea i loko o ka laina, inline-block, inline-table, a me nā ʻāpana cell table.

E koho mai .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, a .align-text-topinā pono.

No ka hoʻokomo pono ʻana i nā ʻike ma ka laina ʻole (e like me <div>s a me nā mea hou aʻe), e hoʻohana i kā mākou mau pono pahu pahu flex .

Me nā mea inline:

kikokikona ma luna waena lalo kikokikona-luna kikokikona-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>

Me nā pūnaewele papa:

laina kumu

luna

waena

lalo

kikokiko-luna

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

API no nā pono hana

Hōʻike ʻia nā pono hana hoʻohālikelike i loko o kā mākou API ponoʻī ma scss/_utilities.scss. E aʻo pehea e hoʻohana ai i nā pono API.

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