CSS: propiedad de alineación vertical

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

La propiedad de alineación vertical del marcador se establece en la parte inferior.

(Visited 20 times, 1 visits today)