Breaking

Post Top Ad

Your Ad Spot

viernes, 4 de octubre de 2019

Cómo usar la propiedad de alineación vertical de CSS

Alinear elementos verticalmente es muy diferente de alinearlos horizontalmente. Hay algunas formas diferentes en que podemos alinear elementos horizontalmente, o centrar elementos horizontalmente, ya sea usando las propiedades de margen o las propiedades de alineación de texto o alguna combinación complicada de uno de esos y algunos jQuery difíciles. Sin embargo, hay una mejor manera de alinear elementos HTML verticalmente, y es mediante el uso de la propiedad de alineación vertical.
La propiedad de alineación vertical se puede usar para indicar a sus elementos dónde deben alinearse verticalmente en la página en relación con sus elementos circundantes. La propiedad toma varios valores diferentes, que incluyen:
  • línea de base: este es el valor predeterminado, y alineará verticalmente y elemento con la línea de base (parte inferior) de su elemento padre
  • sub: esto alineará el elemento con su padre como si fuera un subíndice
  • super: similar a sub, esto alineará el elemento con su padre como si fuera un superíndice
  • top: esto alinea el elemento con la línea superior de su padre
  • text-top: esto alinea el elemento con la línea superior de su texto padre
  • middle: esto alineará el elemento con el medio del elemento padre
  • bottom: esto alineará el elemento con la línea inferior del elemento padre
  • text-bottom: alinea el elemento con la línea inferior de su texto padre
  • "Longitud": mueve el elemento verticalmente asignando una longitud fija a la propiedad en px, ems o%.
Una forma muy común de utilizar la propiedad de alineación vertical es en relación con las imágenes. Supongamos que tiene una imagen y una línea de texto y desea que se apilen una al lado de la otra sin usar la propiedad flotante, por lo que obliga a que el texto se muestre en línea en lugar de como un elemento de nivel de bloque. Terminarás con algo que se parece mucho a esto:
Captura de pantalla 2017-04-19 a las 5.30.57 PM
Casi lo que buscamos ... pero no del todo. Aquí es donde entra la propiedad de alineación vertical. Con solo una línea simple de código, podemos hacer que ese texto se alinee con la parte superior de la imagen. Compruébalo a continuación:
pags{
   alineación vertical: arriba;
}
Después de aplicar el código anterior, su página debería verse como la captura de pantalla siguiente:
Captura de pantalla 19/04/2017 a las 5.31.14 PM
Como puede ver, el texto ahora está alineado verticalmente con la parte superior de la imagen, que es su elemento principal. Ahora que comprende los conceptos básicos de cómo usar la propiedad de alineación vertical, asegúrese de jugar con ella cuando escriba su propio código.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas