En CSS, la propiedad vertical-align controla la alineación vertical de elementos de nivel en línea o celdas de tabla dentro de su elemento contenedor. Se aplica a elementos que forman parte de una línea de texto o que se muestran como bloque en línea o celda de tabla.
La propiedad 'alineación vertical' se usa comúnmente para elementos en línea como imágenes, texto o elementos de bloque en línea dentro de una línea de texto. No se aplica directamente a elementos a nivel de bloque; sin embargo, puedes utilizar técnicas como flexbox o posicionamiento para alinearlos verticalmente.
Sintaxis:
Aquí está la sintaxis básica para la propiedad de alineación vertical:
selector { vertical-align: value; } El 'valor' puede ser una de las siguientes opciones:
| Base: | Alinea la línea base del elemento con la línea base de su elemento principal. Este es el valor predeterminado para la mayoría de los elementos.
| Sub: | Alinea la línea base del elemento con la línea base del subíndice de la fuente del elemento principal.
| Súper: | Alinea la línea base del elemento con la línea base en superíndice de la fuente del elemento principal.
| Arriba: | Alinee la parte superior del elemento con la parte superior del elemento más alto en la línea dentro del cuadro de línea.
| Texto superior: | Alinea la parte superior del elemento con la parte superior de la fuente del elemento principal.
| Medio: | Centra verticalmente el elemento con respecto al elemento principal.
| Abajo: | Alinee la parte inferior del elemento con la parte inferior del elemento más bajo en la línea dentro del cuadro de línea.
| Texto inferior: | Alinee la parte inferior del elemento con la parte inferior de la fuente del elemento principal.
| Porcentaje: | El elemento se alinea verticalmente en un porcentaje específico de la altura de la línea. Por ejemplo, vertical-align: 50% centrará el elemento verticalmente dentro de su elemento principal.
NOTA: Recuerde que 'vertical-align' tiene su comportamiento específico dependiendo del tipo de elemento y el contexto en el que se utiliza, por lo que sus efectos pueden no siempre ser sencillos. Es particularmente útil para alinear elementos en línea con texto u otros elementos en línea.
Ejemplos
Aquí hay más detalles y ejemplos relacionados con la propiedad 'alineación vertical' en CSS:
1. Alineación de línea de base:
Base Otro texto
2. Subíndice y Superíndice:
| La alineación vertical: | El valor secundario alinea la línea base del elemento con la línea base del subíndice de la fuente del elemento principal, haciéndolo aparecer como un subíndice. Por otro lado,
| alineación vertical: | Super alinea la línea base del elemento con la línea base en superíndice de la fuente del elemento principal.
h2O es agua. X2+ y2=r2
3. Alineación superior e inferior:
| La alineación vertical: | El valor superior alinea la parte superior del elemento con la parte superior del elemento más alto en la línea dentro del cuadro de línea. Similarmente,
| alineación vertical: | La parte inferior alinea la parte inferior del elemento con la parte inferior del elemento más bajo en la línea dentro del cuadro de línea.
Alineado superior Alineado desde abajo
4. Alineación media:
| La alineación vertical: | El valor medio centra verticalmente el elemento en relación con el elemento principal. Esto se utiliza a menudo para centrar iconos o imágenes dentro del texto.
Este icono está centrado verticalmente. 
5. Alineación del texto superior e inferior:
| La alineación vertical: | El valor superior del texto alinea la parte superior del elemento con la parte superior de la fuente del elemento principal y
| alineación vertical: | La parte inferior del texto alinea la parte inferior del elemento con la parte inferior de la fuente del elemento principal.
Texto alineado en la parte superior Texto alineado en la parte inferior
6. Alineación porcentual:
El uso de un valor porcentual con alineación vertical le permite alinear el elemento verticalmente en un porcentaje de altura de línea específico. Por ejemplo, alineación vertical: 50% centrará el elemento a la mitad de la altura de la línea.
Centrado verticalmente
7. Centrado vertical de elementos a nivel de bloque:
Para centrar verticalmente un elemento a nivel de bloque dentro de su padre, puede usar el diseño de cuadrícula o flexbox.
hola mundo java
Flexbox example: html Vertically Centered css .parent { display: flex; justify-content: center; align-items: center; height: 200px; /* Set the desired container height */ } 8. Centrado vertical con altura de elemento desconocida:
Si no conoce la altura del elemento que desea centrar verticalmente, puede usar una combinación de posición y transformación:
html Vertically Centered (Unknown Height) CSS .parent { position: relative; height: 200px; /* Set the desired container height */ } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 9. Centrado vertical con texto de varias líneas:
Para centrar verticalmente texto de varias líneas dentro de un contenedor, puede usar una combinación de flexbox y un pseudoelemento:
html Multi-line <br>Vertically Centered Text CSS .parent { display: flex; align-items: center; height: 200px; /* Set the desired container height */ } .child { flex: 1; text-align: center; } .child::before { content: ''; display: inline-block; vertical-align: middle; height: 100%; } 10. Centrado vertical de imágenes en un contenedor con diferentes relaciones de aspecto:
Si tiene imágenes de varias relaciones de aspecto que desea centrar dentro de un contenedor, puede usar una combinación de flexbox y object-fit:
HTML:
<img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css.webp" alt="Image 1"> <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css.webp" alt="Image 2">
CSS:
.parent { display: flex; align-items: center; justify-content: center; height: 200px; /* Set the desired container height */ } img { object-fit: contain; max-height: 100%; } 11. Combinando alineación vertical con altura de línea:
Puede combinar la propiedad de alineación vertical con la propiedad de altura de línea para lograr una alineación vertical más precisa, especialmente con tamaños de fuente más grandes.
.element { font-size: 24px; line-height: 1.5; vertical-align: middle; } 12. Usando la propiedad de visualización para alineación:
Si bien la alineación vertical funciona principalmente con elementos de nivel en línea, puede modificar la propiedad de visualización para lograr la alineación vertical para elementos de nivel de bloque dentro de contextos específicos.
.container { display: table-cell; vertical-align: middle; } 13. Alineación vertical en tablas:
La propiedad de alineación vertical se utiliza a menudo en las celdas de la tabla (
) para controlar la alineación del contenido dentro de las celdas. | css negrita
td { vertical-align: middle; } 14. Alineación de elementos de bloque en línea:
Puede utilizar la alineación vertical para alinear elementos de bloque en línea dentro de una línea de texto, por ejemplo, iconos junto al texto.
<span>⭐</span> Star Rating .icon { vertical-align: middle; font-size: 24px; } Estos son sólo algunos ejemplos de cómo manejar la alineación vertical en diferentes escenarios. Dependiendo de su diseño y requisitos específicos, es posible que deba adaptar o combinar estas técnicas para lograr los resultados deseados. CSS proporciona varias herramientas para manejar la alineación vertical de manera efectiva en diversos contextos.
Recuerde que si bien la propiedad de alineación vertical tiene usos, existen soluciones más completas para todos los escenarios de alineación, especialmente los elementos a nivel de bloque. Para diseños más complejos y requisitos de alineación, se recomienda explorar técnicas de diseño CSS modernas como Flexbox, CSS Grid o incluso valores de posición CSS (como absolutos y relativos) para lograr los resultados deseados de manera más efectiva y predecible.
Recuerde que la 'alineación vertical' solo afecta a elementos de nivel en línea o celdas de tabla. Utilice técnicas como flexbox, diseño de cuadrícula o posicionamiento para alinear verticalmente elementos a nivel de bloque.
Algunos ejemplos más
table, th, td{ border: 2px solid red; border-collapse: collapse; font-size: 20px; } #super{ vertical-align: super; } #sub{ vertical-align: sub; } <table class="table"> <td>baseline</td> <td>middle</td> <td>bottom</td> <td>top</td> <td>Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. </td> </table> <h2> Use of super and sub values </h2> <h3>Using super value: x<span id="super">2</span>+ y<span id="super">2</span> = r<span id="super">2</span></h3> <h3> Chemical formula of Water by using sub value: H<span id="sub">2</span>O</h3> Pruébalo ahora Producción
Ahora, hay otro ejemplo en el que alineamos el texto con la imagen.
Ejemplo
div{ font-size: 20px; border: 2px solid red; } img{ width:150px; height: 100px; } img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } img.middle { vertical-align: middle; } An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp"> image with a default alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a text-bottom alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a middle alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a text-top alignment. Pruébalo ahora Producción
Ventajas de la alineación vertical en CSS
| Fácil de usar para elementos en línea: | La propiedad de alineación vertical es sencilla para alinear elementos, como imágenes, iconos o texto, dentro de una línea de texto u otros elementos.
| Amplia compatibilidad con navegadores: | La propiedad de alineación vertical tiene buena compatibilidad con navegadores y es ampliamente compatible con diferentes navegadores.
| Múltiples opciones de alineación: | Proporciona varias opciones de alineación, como línea de base, medio, superior, inferior, texto superior, texto inferior, subíndice y superíndice, lo que brinda a los desarrolladores flexibilidad para alinear elementos según sus requisitos.
| Alineación responsiva: | Se puede utilizar en diseño responsivo para adaptar la alineación vertical según el tamaño del contenedor o el espacio disponible.
| Simplicidad para elementos en línea: | Para alinear elementos pequeños como íconos o imágenes dentro de una línea de texto, la propiedad de alineación vertical proporciona una solución relativamente simple sin requerir técnicas de diseño complejas.
| Sintonia FINA: | La propiedad permite ajustar la posición vertical de los elementos, lo que puede resultar útil para lograr objetivos de diseño específicos.
| Coherencia con las celdas de la tabla: | En el contexto de las tablas, la propiedad de alineación vertical controla la alineación del contenido dentro de las celdas de la tabla. Esto puede ayudar a mantener la coherencia entre los diseños basados en tablas.
| Combinando con texto: | Alinea eficazmente elementos con contenido de texto, como alinear iconos o etiquetas en línea con texto adyacente.
| Mantener relaciones de aspecto: | Al alinear imágenes o íconos dentro de una línea de texto, la alineación vertical puede ayudar a mantener la relación de aspecto de estos elementos, especialmente cuando se combina con tamaños de fuente y alturas de línea adecuados.
| Correcciones rápidas de alineación: | Cuando necesita soluciones rápidas para problemas de alineación vertical, especialmente en escenarios con contenido mixto, la alineación vertical puede proporcionar una solución rápida sin requerir una reestructuración extensa del diseño.
| Estilo de correo electrónico CSS: | En los correos electrónicos HTML, donde es necesario admitir mejor los diseños complejos, el uso de la alineación vertical puede resultar útil para la alineación vertical básica de elementos sin depender de hojas de estilo externas o técnicas complejas.
| Compatible con pantalla: | bloque en línea: la propiedad de alineación vertical es compatible con elementos de bloque en línea, lo que permite una fácil alineación vertical de dichos elementos dentro de una línea.
| Mantener la coherencia: | Para los elementos que forman parte de datos tabulares o que necesitan alinearse con elementos similares en diferentes filas o columnas, la alineación vertical puede ayudar a mantener la coherencia visual.
| Compatibilidad del navegador: | A diferencia de algunas técnicas CSS más nuevas, la alineación vertical ha sido parte de CSS durante mucho tiempo y disfruta de una buena compatibilidad entre navegadores.
Desventajas de la alineación vertical en CSS
| Limitado a elementos en línea: | La limitación más importante de la propiedad de alineación vertical es que solo funciona para elementos de nivel en línea o celdas de tabla. No se aplica directamente a elementos a nivel de bloque. Esto puede hacer que la alineación vertical sea más desafiante para elementos más grandes o diseños complejos.
| Comportamiento inconsistente: | La alineación vertical puede ser complicada e inconsistente, especialmente con diferentes tamaños de fuente, alturas de línea y elementos anidados. El mismo valor de alineación vertical puede producir resultados diferentes según el contexto.
| Cualidades del navegador: | Algunos navegadores más antiguos pueden tener interpretaciones inconsistentes o peculiaridades con la propiedad de alineación vertical, lo que puede generar resultados inesperados. Sin embargo, este problema ha mejorado con el avance de los navegadores modernos.
| Control limitado sobre el espaciado: | La propiedad de alineación vertical se ocupa principalmente de alinear elementos verticalmente, pero solo ofrece un pequeño control sobre el espacio entre elementos. Ajustar el espaciado a menudo requiere modificaciones adicionales de CSS o HTML.
| Flexbox y Grid como alternativas: | Para requisitos de diseño más complejos y alineación vertical de elementos a nivel de bloque, los desarrolladores suelen confiar en Flexbox o CSS Grid, que proporcionan soluciones más sólidas y predecibles.
| No apto para centrado total: | Si bien la alineación vertical es útil para alinear verticalmente elementos en línea, es adecuada para centrar completamente (horizontal y verticalmente) elementos a nivel de bloque con técnicas CSS adicionales.
| Nombre engañoso: | El nombre 'alineación vertical' puede ser engañoso porque no alinea el elemento verticalmente como los desarrolladores suelen esperar. En cambio, controla la alineación del contenido del elemento dentro de su cuadro de línea.
| Complejidad con diferentes fuentes: | El comportamiento de la alineación vertical puede ser impredecible cuando se trata de elementos de diferentes tamaños de fuente y alturas de línea. Esto puede dificultar la alineación vertical constante.
| Limitado para diseños complejos: | No es adecuado para diseños o escenarios complejos en los que se deben alinear verticalmente elementos más grandes a nivel de bloque dentro de un contenedor principal.
| Compatibilidad entre navegadores: | Si bien los navegadores modernos han mejorado la compatibilidad con la alineación vertical, los navegadores más antiguos aún pueden presentar inconsistencias o comportamientos inesperados.
| Técnicas alternativas: | Las técnicas de diseño CSS modernas como Flexbox y CSS Grid ofrecen formas más poderosas y predecibles de manejar requisitos de diseño complejos, incluida la alineación vertical de elementos en línea y a nivel de bloque.
| Consideraciones de accesibilidad: | Es posible que utilizar la alineación vertical para el diseño no sea el enfoque más accesible, ya que podría interferir con los lectores de pantalla y otras tecnologías de asistencia. El HTML semántico y las técnicas CSS adecuadas suelen ser mejores opciones de accesibilidad.
| Desafíos de depuración: | Depurar comportamientos inesperados o problemas de alineación relacionados con la alineación vertical a veces puede resultar complicado, especialmente cuando se trata de elementos anidados y tamaños de fuente variables.
| Evolución del diseño web: | A medida que evoluciona el panorama del desarrollo web, nuevas técnicas de diseño como CSS Grid Layout y Flexbox brindan soluciones más modernas y completas para los desafíos de diseño, lo que potencialmente hace que la alineación vertical sea menos relevante para muchos escenarios.
En general, si bien la propiedad de alineación vertical es útil para alinear elementos en línea o celdas de tabla dentro de una línea de texto, los desarrolladores a menudo necesitan otras técnicas CSS para requisitos de diseño y posicionamiento más avanzados, especialmente cuando se trata de elementos a nivel de bloque o diseños complejos. CSS Flexbox y CSS Grid son alternativas poderosas para un control más amplio de alineación y posicionamiento.
Conclusión
La propiedad de alineación vertical es útil para alinear elementos en línea dentro de celdas de texto o tabla. Sin embargo, tiene limitaciones y su uso eficaz puede resultar complicado para diseños complejos o elementos a nivel de bloque. Los desarrolladores deberían considerar técnicas de diseño CSS modernas que brinden más control y flexibilidad sobre la alineación y el posicionamiento.
