Cómo alinear el texto verticalmente en CSS

Un texto se puede agregar fácilmente en cualquier lugar, pero sin alineación, puede parecer imprevente y menos atractivo. El texto no alineado también puede perturbar todo el aspecto de una página web. Para abordar tales cosas en aplicaciones web, podemos usar algunas propiedades útiles de CSS que lo ayudarán a alinear los textos en poco tiempo.

Este artículo demostrará cómo alinear el texto verticalmente en CSS.

Cómo alinear el texto verticalmente en CSS?

En CSS, puede usar las propiedades a continuación para alinear el texto verticalmente:

• • Propiedad de algodón de línea
  • Propiedades de visualización y alineación

Ahora, pasemos por cada método uno por uno!

Método 1: Uso de la propiedad de altura de línea para alinear el texto verticalmente en CSS

El "altura de la línea"La propiedad especifica el área a continuación y elementos en línea ascendentes. Establece la distancia de un texto de otros elementos. Usando la propiedad de alganche de línea, el texto se puede alinear fácilmente verticalmente al medio.

Ejemplo

Aquí hay un texto dentro de un cuadro (borde) actualmente ubicado en la parte superior izquierda. Alineemos este texto al centro vertical y horizontalmente:

Para hacerlo, agregue un contenedor ""Dentro de la etiqueta del archivo HTML y especifique el texto requerido en él:

Mejor sitio web educativo!

La caja se forma usando un "3px"Border y"250px" altura. El "tamaño de fuente"La propiedad se usa con el valor"24px"Para hacer que la fuente sea visible. Asignaremos div a "altura de la línea" de "250px"Por alinear su texto verticalmente en el medio. A continuación, usaremos el "texto alineado"Propiedad para alinear el texto en el centro:

div
Línea de altura: 250px;
Text-Align: Center;
tamaño de fuente: 24px;
Altura: 250px;
borde: 3px sólido;

Como puede ver, el texto se ha alineado verticalmente con el centro utilizando la altura de línea y horizontalmente al centro con la propiedad de alineación de texto.

Ahora avancemos hacia el siguiente método.

Método 2: Uso de la propiedad de visualización y alineación de elementos para alinear el texto verticalmente en CSS

"Flexbox"Es un diseño unidimensional que le permite formatear HTML. También puede utilizarlo para alinear los elementos vertical u horizontalmente.

Entonces, tomemos un ejemplo y alineemos un texto verticalmente con la ayuda de FlexBox.

Ejemplo

En primer lugar, haremos que nuestro contenedor sea flexible estableciendo el valor del "mostrar"Propiedad como"doblar". A continuación, usa el "ítems alineados"Propiedad para configurar el contenido en el centro verticalmente. Además, para alinear el contenido en el centro horizontalmente, el "Justify-ContentSe utilizará la propiedad:

div
Pantalla: Flex;
Alineación de ítems: Centro;
Justify-Content: Center;
tamaño de fuente: 24px;
Altura: 200px;
borde: 3px sólido;

El texto especificado se ha alineado con el centro con éxito:

Hemos proporcionado métodos relacionados con la alineación del texto verticalmente en CSS.

Conclusión

En CSS, el texto se puede alinear fácilmente verticalmente con la ayuda del "altura de la línea" propiedad. También puedes utilizar el "Flexbox"Para la alineación vertical del texto con"mostrar" y "ítems alineados" propiedades. Flexbox es un diseño unidimensional y simplemente se usa para la alineación vertical u horizontal de los elementos. Esta publicación ofreció dos métodos más fáciles que pueden ayudarlo a alinear el texto verticalmente en CSS.