Tipografía
Utilidades para controlar la alineación vertical de un cuadro en línea o de celda de tabla.
| Clase | Estilos |
|---|---|
align-baseline | vertical-align: baseline; |
align-top | vertical-align: top; |
align-middle | vertical-align: middle; |
align-bottom | vertical-align: bottom; |
align-text-top | vertical-align: text-top; |
align-text-bottom | vertical-align: text-bottom; |
align-sub | vertical-align: sub; |
align-super | vertical-align: super; |
align-(<custom-property>) | vertical-align: var(<custom-property>); |
align-[<value>] | vertical-align: <value>; |
Usa la utilidad align-baseline para alinear la línea base de un elemento con la línea base de su elemento padre:
<span class="inline-block align-baseline">The quick brown fox...</span>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">The quick brown fox...</span>Usa la utilidad align-middle para alinear el medio de un elemento con la línea base más la mitad de la altura de la x del elemento padre:
<span class="inline-block align-middle">The quick brown fox...</span>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">The quick brown fox...</span>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">The quick brown fox...</span>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">The quick brown fox...</span>Usa la sintaxis align-[<value>] para establecer el/la alineación vertical basándose 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 añade la función var() por ti automáticamente.
Antepone a la utilidad vertical-align el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<span class="align-middle md:align-top ..."> <!-- ... --></span>Obtén más información sobre el uso de variantes en la documentación de variantes.