Alineamiento vertical
Cambie fácilmente la alineación vertical de los elementos en línea, de bloque en línea, de tabla en línea y de celda de tabla.
Cambia la alineación de los elementos con las vertical-alignment
utilidades. Tenga en cuenta que la alineación vertical solo afecta a los elementos en línea, bloque en línea, tabla en línea y celda de tabla.
Elija entre .align-baseline
, .align-top
, .align-middle
, .align-bottom
, .align-text-bottom
y .align-text-top
según sea necesario.
Para centrar verticalmente el contenido que no está en línea (como <div>
s y más), use nuestras utilidades de cuadro flexible .
Con elementos en línea:
<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 celdas de tabla:
base | parte superior | medio | abajo | parte superior del texto | texto inferior |
<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>
Hablar con descaro a
API de utilidades
Las utilidades de alineación vertical se declaran en nuestra API de utilidades en formato scss/_utilities.scss
. Aprenda a usar la API de utilidades.
"align": (
property: vertical-align,
class: align,
values: baseline top middle bottom text-bottom text-top
),