vertical-align

Ejemplos

Alineando a la línea base

Usa la utilidad align-baseline para alinear la línea base de un elemento con la línea base de su padre:

<span class="inline-block align-baseline">El rápido zorro marrón...</span>

Alineando arriba

Usa la utilidad align-top para alinear la parte superior de un elemento y sus descendientes con la parte superior de toda la línea:

<span class="inline-block align-top">El rápido zorro marrón...</span>

Alineando al medio

Usa la utilidad align-middle para alinear el medio de un elemento con la línea base más la mitad de la altura x del padre:

<span class="inline-block align-middle">El rápido zorro marrón...</span>

Alineando abajo

Usa la utilidad align-bottom para alinear la parte inferior de un elemento y sus descendientes con la parte inferior de toda la línea:

<span class="inline-block align-bottom">El rápido zorro marrón...</span>

Alineando a la parte superior del padre

Usa la utilidad align-text-top para alinear la parte superior de un elemento con la parte superior de la fuente del elemento padre:

<span class="inline-block align-text-top">El rápido zorro marrón...</span>

Alineando a la parte inferior del padre

Usa la utilidad align-text-bottom para alinear la parte inferior de un elemento con la parte inferior de la fuente del elemento padre:

<span class="inline-block align-text-bottom">El rápido zorro marrón...</span>

Usando un valor personalizado

Usa la sintaxis align-[<value>] para establecer el vertical alignment basado en un valor completamente personalizado:

<span class="align-[4px] ...">
  <!-- ... -->
</span>

Para variables CSS, también puedes usar la sintaxis align-(<custom-property>) :

<span class="align-(--my-alignment) ...">
  <!-- ... -->
</span>

Esto es solo un atajo para align-[var(<custom-property>)] que agrega la función var() por ti automáticamente.

Responsive design

Prefija una utilidad vertical-align con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<span class="align-middle md:align-top ...">
  <!-- ... -->
</span>

Aprende más sobre el uso de variantes en la documentación de variantes.