Cómo posicionar elementos web con alineación vertical CSS

Búsqueda de Google









Escenario
descripción






Bosque

Lorem ipsum dolor siéntate amet.






Océano

Lorem ipsum dolor siéntate amet.

Él Código HTML anterior crea una página web simple que muestra cuatro elementos: texto vinculado, una imagen, un video incrustado y una tabla. Debería verse así en su navegador:

Cómo alinear texto verticalmente

De forma predeterminada, la mayoría de los elementos de texto (como encabezados,

, y

Sin embargo, algunos elementos de texto como el y la etiqueta está en línea. Como resultado, admiten la propiedad de alineación vertical. Para alinear verticalmente el texto, simplemente asigne el valor apropiado a la propiedad de alineación vertical de CSS.

Uso del valor superior de alineación vertical en el texto

un {
 alineación vertical: superior;
}

Agregando el codigo css anterior al documento HTML básico alineará la parte superior del etiquete el texto con la parte superior del elemento más alto de la línea. Produciendo la siguiente pantalla actualizada:

Uso del valor porcentual en el texto

un {
 alineación vertical: -50%;
}

El CSS anterior alinea el elemento de texto en una posición que está un 50 % por debajo de la línea de base del elemento principal. Produce el siguiente resultado en su navegador:

Como puede ver en la imagen de arriba, el elemento de texto ocupa una posición debajo de los elementos de imagen y video, que están en la misma línea. Para colocar este elemento en la línea de base o por encima de ella, utilice un valor de porcentaje positivo.

Usar el valor de longitud en el texto

un {
 alineación vertical: 90px;
}

El código anterior alinea la línea de base del elemento de texto a una longitud de 90 px por encima de la línea de base del elemento principal. Esto produce el siguiente resultado en un navegador:

Cómo alinear imágenes verticalmente

Él La etiqueta es un elemento en línea, con el que funciona bien la propiedad de alineación vertical de CSS.

Uso del supervalor de alineación vertical en las imágenes

imagen {
 alineación vertical: súper;
}

El código anterior coloca la imagen en la línea de base del superíndice del elemento principal. Esto significa en una posición por encima de la línea de base, como puede ver en el siguiente resultado:

Uso del valor porcentual de alineación vertical en imágenes

imagen {
 alineación vertical: 25%;
}

El código anterior alinea la línea de base del elemento de imagen en un 25 % por encima de la línea de base del elemento principal. Esto produce el siguiente efecto espejo del supervalor:

Uso del valor de longitud de alineación vertical en las imágenes

imagen {
 alineación vertical: 5px;
}

El código anterior alinea la línea de base del elemento de imagen en una posición 5 px por encima de la línea de base del elemento principal. Esto produce un efecto similar al de los valores super y 25%:

Los medios integrados, como videos e iframes, son elementos HTML en línea. Por lo tanto, la propiedad de alineación vertical de CSS funciona muy bien con ellos.

Uso del supervalor de alineación vertical en un video

video {
 alineación vertical: sub;
}

El código anterior coloca el video en la línea de base del subíndice del elemento principal. Esto significa en una posición por debajo de la línea de base, como puede ver en el siguiente resultado:

Uso del valor porcentual de alineación vertical en un video

video {
 alineación vertical: -25%;
}

El código anterior alinea la línea de base del elemento de video en un 25 % por debajo de la línea de base del elemento principal. Esto produce el siguiente efecto espejo del valor sub:

Uso del valor de longitud de alineación vertical en un video

video {
 alineación vertical: -5px;
}

El código anterior alinea la línea de base del elemento de imagen en una posición 5 px por debajo de la línea de base del elemento principal. Esto produce un efecto como los valores sub y -25%:

Cómo alinear verticalmente elementos en una tabla

Usar la propiedad de alineación vertical con una tabla es un poco complicado, ya que una tabla es un elemento de bloque. sin embargo, el

Uso del valor superior de alineación vertical en los datos de la tabla

td {
 altura: 40px;
 alineación vertical: superior;
}

El código anterior agrega una altura de 40 px a cada celda de la tabla. Luego alinea los datos en cada celda con la parte superior de cada fila. Esto produce el siguiente resultado en el navegador:

Uso del valor central de alineación vertical en los datos de la tabla

td {
 altura: 40px;
 alineación vertical: medio;
}

El valor central de alineación vertical en el código anterior centra verticalmente los datos dentro de cada celda. Produce el siguiente resultado en el navegador:

Uso del valor inferior de alineación vertical en los datos de la tabla

td {
 altura: 40px;
 alineación vertical: inferior;
}

El código anterior alinea los datos de cada celda con la parte inferior de cada fila. Produce el siguiente resultado en el navegador:

Ahora puede alinear los elementos en su página web

Ahora puede usar la propiedad de alineación vertical de CSS con una gran cantidad de diferentes elementos en línea, incluidos texto, medios incrustados y datos de tablas. La regla general es que la propiedad de alineación vertical solo funciona en elementos en línea y de bloque en línea.

Sin embargo, puede usar esta propiedad en elementos de bloque, solo necesita convertirlos primero en elementos en línea o en bloque en línea. Recuerde que puede combinar la alineación vertical con otras propiedades de alineación, como la alineación de texto.

Sobre el Autor

kadeisha kean (52 artículos publicados)

Kadeisha Kean es una desarrolladora de software de pila completa y escritora técnica/tecnológica. Tiene la clara habilidad de simplificar algunos de los conceptos tecnológicos más complejos; producir material que pueda ser fácilmente entendido por cualquier novato en tecnología. Le apasiona escribir, desarrollar software interesante y viajar por el mundo (a través de documentales).

Más de Kadeisha Kean