Este artículo demuestra cómo alinear verticalmente el texto dentro de un flexbox:
Método 1: usar la propiedad 'alinear elemento'
Para alinear el texto verticalmente, los usuarios pueden utilizar el botón ' alinear elemento ” propiedad proporcionada por CSS. Ayuda a los elementos a establecer su alineación dentro del flexbox. Las posibles posiciones de alineación vertical pueden estar en el “ arriba ”, medio ', o ' abajo ' lado.
Las demostraciones prácticas para alinear elementos en estas direcciones se indican a continuación:
Ejemplo 1: Posición superior
Para alinear el texto dentro del flexbox en la posición superior, el ' arranque flexible ” valor se proporciona a la “ alinear elementos ' propiedad. Esta propiedad se asigna al div principal que se mostrará como flex. Supongamos, el div con una clase de ' vertical ” se crea en el archivo HTML. Luego, en el archivo CSS, seleccione esa clase y asigne las siguientes propiedades:
.vertical {
color : blanco ;
altura : 150px ;
mostrar : doblar ;
relleno-izquierda : 20px ;
alinear elementos : arranque flexible ;
color de fondo : bosque verde ;
}
- En primer lugar, se proporciona un estilo y una alineación básicos al div utilizando las propiedades de color, color de fondo y altura de CSS.
- La propiedad 'display' también se establece en 'flex' para convertirlo en un cuadro flexible.
- Por último, para mostrar el texto al comienzo del cuadro flexible, establezca la propiedad 'alinear elementos' en 'inicio flexible'.
Después de ejecutar el código anterior, la página web se ve así:
El resultado muestra que el texto ahora está alineado en la posición superior dentro del flexbox.
Ejemplo 2: Posición intermedia
Para alinear verticalmente el texto en la posición media, configure el “ centro 'valor al CSS' alinear elementos ' propiedad:
.vertical {color : blanco ;
altura : 150px ;
mostrar : doblar ;
relleno-izquierda : 20 píxeles ;
alinear elementos : centro ;
color de fondo : bosque verde ;
}
Después de la ejecución del código anterior:
El resultado anterior muestra que el texto ahora está alineado en el centro del flexbox.
Ejemplo 3: Posición inferior
Para configurar el texto en la parte inferior del flexbox, asigne el ' extremo flexible ” valor a la “ alinear elementos ' propiedad. Esta vez, el texto se alinea en la posición donde finaliza el flexbox, es decir, en la parte inferior:
.vertical {color : blanco ;
altura : 150px ;
mostrar : doblar ;
relleno-izquierda : 20 píxeles ;
alinear elementos : extremo flexible ;
color de fondo : bosque verde ;
}
Después de ejecutar el código anterior, la página web se ve así:
El resultado anterior muestra que el texto ahora está alineado verticalmente en la posición inferior.
Método 2: Uso de la propiedad 'justify-content'
El ' justificar-contenido La propiedad ” también se puede utilizar para alinear verticalmente el texto dentro del flexbox. Sin embargo, funciona igual que el “ texto alineado ” y alinea los elementos en la dirección de la fila. Entonces, para cambiar la dirección de alineación, el “ dirección de flexión La propiedad ” se utiliza para establecer el “ justificar-contenido ” alineación hacia “ columna ' dirección:
.vertical {altura : 150px ;
mostrar : doblar ;
relleno-izquierda : 20px ;
color : blanco ;
color de fondo : cian oscuro ;
dirección de flexión : columna ;
justificar-contenido : extremo flexible ;
}
La explicación del código anterior se proporciona a continuación:
- El ' altura ”, “ color ' y ' relleno-izquierda Las propiedades funcionan igual que el método anterior.
- Después de eso, configure el “ columna ” valor a la “ dirección de flexión ” del flexbox para aplicar estilos a través de columnas.
- Después de eso, el “ justificar-contenido La propiedad ” alinea el texto verticalmente.
- Al final, el “ extremo flexible El valor ” alinea el elemento en el “ abajo ' lado.
Nota : Los usuarios también pueden establecer “ arranque flexible ' y ' centro ” valores a la “ arriba ', y ' medio ” lados, respectivamente.
Por ejemplo, después de ejecutar el código anterior, la página web se ve así:
El resultado anterior muestra que el texto está alineado en la parte inferior del flexbox.
Conclusión
Para alinear verticalmente el texto dentro de un flexbox, el ' alinear elementos ' y ' justificar-contenido Se pueden utilizar las propiedades de CSS. Ambas propiedades obtienen “ arranque flexible ”, “ centro ' o ' extremo flexible ” valores para alinear el texto en “ arriba ”, “ medio ' y ' abajo ” direcciones dentro del flexbox, respectivamente. Este artículo ha demostrado la alineación vertical del texto en un flexbox.