in English
Aliñación vertical
Cambia facilmente a aliñación vertical dos elementos da cela en liña, de bloque en liña, de táboa en liña e de táboa.
Cambiar a aliñación dos elementos coas vertical-alignment
utilidades. Teña en conta que o aliñamento vertical só afecta aos elementos de celas en liña, bloques en liña, táboas en liña e celas da táboa.
Escolla entre .align-baseline
, .align-top
, .align-middle
, .align-bottom
, .align-text-bottom
e .align-text-top
segundo sexa necesario.
Para centrar verticalmente o contido non en liña (como <div>
s e máis), utiliza as nosas utilidades de caixa flexible .
Con elementos en liña:
liña base
arriba
medio
inferior
texto-superior
texto-inferior
<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>
Con celas da táboa:
liña de base | arriba | medio | fondo | texto-top | texto-baixo |
<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 de utilidades
As utilidades de aliñamento vertical decláranse na nosa API de utilidades en scss/_utilities.scss
. Aprende a usar a API de utilidades.
"align": (
property: vertical-align,
class: align,
values: baseline top middle bottom text-bottom text-top
),