Lerrokadura bertikala

Erraz aldatu lerrokada bertikala, lerro-blokea, lerro-taula eta taulako gelaxken elementuen lerrokadura bertikala.

Aldatu elementuen lerrokadura vertical-alignmentutilitateekin. Kontuan izan lerrokatze bertikalak lerroko, lerroko blokeko, lerroko taulako eta taulako gelaxken elementuei soilik eragiten diela.

Aukeratu .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottometa .align-text-topbehar duzunaren artean.

Lineakoa ez den edukia bertikalki zentratzeko (adibidez, <div>s eta gehiago), erabili gure flex box utilitateak .

Inline elementuekin:

oinarri -lerroa goian erdian behean testu-goi testu-behean

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>

Taula-gelaxkekin:

oinarri-lerroa

goian

erdikoa

behean

testu-top

testu-behea

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 APIa

Lerrokatze bertikaleko utilitateak gure utilitateen APIan deklaratzen dira scss/_utilities.scss. Ikasi utilitateen APIa erabiltzen.

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