Alineación vertical
Cambia fácilmente la alineación vertical de los elementos en línea, bloque en línea, tabla en línea y celda de tabla.
Cambiar la alineación de elementos con utilidades de vertical-alignment
(opens in a new tab). Ten en cuenta que la alineación vertical solo afecta a los elementos en línea, en bloque en línea, en tabla en línea y en celdas de tabla.
Elige entre .align-baseline
, .align-top
, .align-middle
, .align-bottom
, .align-text-bottom
y .align-text-top
según sea necesario.
Para centrar verticalmente contenido no en línea (como <div>
s y más), usa nuestras utilidades de flexbox.
Con elementos en línea:
<span class="align-baseline">baseline</span>
<span class="align-top">arriba</span>
<span class="align-middle">medio</span>
<span class="align-bottom">abajo</span>
<span class="align-text-top">texto-arriba</span>
<span class="align-text-bottom">texto-abajo</span>
Con celdas de tabla:
<table style="height: 100px;">
<tbody>
<tr>
<td class="align-baseline">baseline</td>
<td class="align-top">arriba</td>
<td class="align-middle">medio</td>
<td class="align-bottom">abajo</td>
<td class="align-text-top">texto-arriba</td>
<td class="align-text-bottom">texto-abajo</td>
</tr>
</tbody>
</table>
CSS
API de utilidades de Sass
Las utilidades de alineación vertical se declaran en nuestra API de utilidades en scss/_utilities.scss
. Aprende a utilizar la API de utilidades.
scss/_utilities.scss (opens in a new tab)
"align": (
property: vertical-align,
class: align,
values: baseline top middle bottom text-bottom text-top
),