Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.
CSS: propiedad de alineación vertical
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada alineamiento vertical Con sintaxis y ejemplos.
describir
La propiedad de alineación vertical de CSS define la alineación vertical de elementos de celda en línea o de tabla.
sintaxis
La sintaxis para alinear verticalmente las propiedades CSS es:
vertical-align: value;parámetro o parámetro
valor
La alineación del texto. Puede ser un valor diferente dependiendo de si el elemento es un elemento en línea o un elemento de celda de tabla.
el valor del elemento en línea
Cuando el valor es un elemento en línea, puede ser uno de los siguientes:
| valor | describir |
|---|---|
| óptimo | La parte superior del elemento y sus descendientes se alinean con la parte superior de toda la línea. img { alineación vertical: arriba; } |
| fondo | La parte inferior del elemento y sus descendientes se alinean con la parte inferior de toda la fila. img { alineación vertical: inferior; } |
| base | La línea base de un elemento está alineada con la línea base de su elemento principal img { alineación vertical: línea base; } |
| hijo | La línea de base de un elemento está alineada con la línea de base del subíndice de su elemento principal img { alineación vertical: sub; } |
| excelente | La línea de base del elemento está alineada con la línea de base en superíndice de su elemento principal img { alineación vertical: súper; } |
| parte superior del texto | La parte superior del elemento está alineada con la parte superior de la fuente del elemento principal img { alineación vertical: parte superior del texto; } |
| parte inferior del texto | La parte inferior del elemento está alineada con la parte inferior de la fuente del elemento principal img { alineación vertical: parte inferior del texto; } |
| medio | El centro del elemento está alineado con el centro de las letras minúsculas en la fuente del elemento principal img { alineación vertical: medio; } |
| estable | La línea de base del elemento está alineada por encima de la línea de base de su padre por la cantidad fija dada img { alineación vertical: 5px; } |
| porcentaje | La línea de base del elemento se alinea en el porcentaje dado por encima de la línea de base de su padre (el porcentaje del atributo de altura de línea) img { alineación vertical: 10%; } |
| heredar | El elemento heredará la propiedad de alineación vertical de su elemento principal img { alineación vertical: heredado; } |
valor de celda de tabla
Cuando el valor es una celda de tabla, puede ser uno de los siguientes:
| valor | describir |
|---|---|
| óptimo | El borde de relleno superior de la celda está alineado con la parte superior de la fila td { alineación vertical: superior; } |
| medio | El centro del cuadro de relleno de la celda está alineado dentro de la fila. td { alineación vertical: medio; } |
| fondo | El borde de relleno inferior de la celda está alineado con la parte inferior de la fila td { alineación vertical: superior; } |
| heredar | El elemento heredará la propiedad de alineación vertical de su elemento principal td { alineación vertical: heredar; } |
notas
- La propiedad de alineación vertical puede ser negativa.
- Si el elemento no tiene línea base, la propiedad de alineación vertical utilizará el borde del margen.
Compatibilidad del navegador
La propiedad CSS vertical-align tiene soporte básico para los siguientes navegadores:
- Aleación de cromo
- androide
- Firefox (Geco)
- Firefox móvil (Geco)
- Navegador de Internet (IE)
- es decir, móvil
- ópera
- Ópera Móvil
- Safari (WebKit)
- Safari para móvil
ejemplo
Discutiremos la propiedad de alineación vertical a continuación, explorando un ejemplo de cómo usar esta propiedad en CSS.
Usar elementos en línea
Veamos un ejemplo de alineación vertical CSS con elementos en línea.
img { vertical-align: top; }En este ejemplo de alineación vertical CSS, vamos a La propiedad de alineación vertical del marcador se establece en la parte superior.
Usar celdas de tabla
A continuación, veamos un ejemplo de alineación vertical CSS para texto alineado a la izquierda.
td { vertical-align: bottom; }En este ejemplo de alineación vertical CSS, vamos a