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-alignment
utilitats. 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-bottom
i .align-text-top
segons 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:
<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
),