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:

valordescribir
óptimoLa parte superior del elemento y sus descendientes se alinean con la parte superior de toda la línea.
img { alineación vertical: arriba; }
fondoLa parte inferior del elemento y sus descendientes se alinean con la parte inferior de toda la fila.
img { alineación vertical: inferior; }
baseLa línea base de un elemento está alineada con la línea base de su elemento principal
img { alineación vertical: línea base; }
hijoLa 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; }
excelenteLa 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 textoLa 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 textoLa parte inferior del elemento está alineada con la parte inferior de la fuente del elemento principal
img { alineación vertical: parte inferior del texto; }
medioEl centro del elemento está alineado con el centro de las letras minúsculas en la fuente del elemento principal
img { alineación vertical: medio; }
estableLa 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; }
porcentajeLa 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%; }
heredarEl 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:

valordescribir
óptimoEl borde de relleno superior de la celda está alineado con la parte superior de la fila
td { alineación vertical: superior; }
medioEl centro del cuadro de relleno de la celda está alineado dentro de la fila.
td { alineación vertical: medio; }
fondoEl borde de relleno inferior de la celda está alineado con la parte inferior de la fila
td { alineación vertical: superior; }
heredarEl 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 14 times, 1 visits today)