Alineació vertical

Canvieu fàcilment l'alineació vertical dels elements de cel·la en línia, bloc en línia, taula en línia i cel·les de taula.

Canviar l'alineació dels elements amb les vertical-alignmentutilitats. Tingueu en compte que l'alineació vertical només afecta els elements de cel·la en línia, bloc en línia, taula en línia i cel·les de taula.

Trieu entre .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottomi .align-text-topsegons sigui necessari.

Per centrar verticalment contingut no en línia (com ara <div>s i més), utilitzeu les nostres utilitats de caixa flexible .

Amb elements en línia:

línia de base superior mig inferior text-superior text-baix

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

Amb cel·les de taula:

línia de base

superior

mig

inferior

text-top

text-baix

<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

Utilitats API

Les utilitats d'alineació vertical es declaren a la nostra API d'utilitats a scss/_utilities.scss. Apreneu a utilitzar l'API d'utilitats.

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