CSS proporciona varios estilos de alineación, como izquierda, derecha, centro, justificada, horizontal y vertical, para diferentes tipos de contenido. Más específicamente, para encabezar y líneas cortas, el "centroSe utiliza el estilo de alineación. Usando este estilo, la apariencia de contenido se puede mejorar y se verá bien.

Este artículo explicará varios métodos para centrar el texto verticalmente. Entonces, comencemos!

Cómo centrar el texto verticalmente en CSS?

Hay muchas formas de centrar el texto verticalmente, como "Flexbox","altura de la línea","relleno","transformar", y el "flotar" propiedad. En esta sección, aprenderemos sobre algunas de las propiedades mencionadas para centrar el texto verticalmente en CSS. Pero antes de eso, mostraremos el procedimiento de texto de alineación del centro.

Ejemplo

En el de HTML, crearemos un contenedor con la clase llamada "centro"Y dentro de él crea un encabezado usando

etiqueta:

"Actuar sin espectativas"

Después de eso, muévase al archivo y estilo CSS que creó en el archivo HTML.

Aquí ".centro"Se usa para acceder a la clase que asignamos a la . A continuación, estableceremos el ancho del contenedor creado en "450px"Y la altura de"200px". También establecemos el borde de usar el "borde"Propiedad y asignar el valor del borde"10px" y "doble":

.centro
Ancho: 450px;
Altura: 200px;
borde: 7px doble;

Después de la implementación del código anterior, obtenemos el siguiente resultado:

Aquí, vemos que el texto se muestra en la esquina superior izquierda de la pantalla. Ahora, pasamos al siguiente paso, en el que describiremos diferentes métodos para centrar el texto utilizando verticalmente CSS.

Método 1: Texto central verticalmente en CSS usando Flex

CSS "doblar"Es el valor del"mostrar" propiedad. Se usa para establecer contenido o elementos de acuerdo con el tamaño de su visión. Permite que los elementos CSS se organicen de manera eficiente creando un espacio igual entre ellos.

Sintaxis

Pantalla: Flex

Entonces, continuemos el ejemplo anterior para centralizar el texto verticalmente.

Ejemplo

Para establecer la posición de texto en el centro y vertical, asignaremos el valor de la propiedad de visualización como "doblar"Y alinearse como" como "centro":

.centro
Ancho: 450px;
Altura: 200px;
borde: 7px doble;
Pantalla: Flex;
Alineación de ítems: Centro;

Esto nos dará el siguiente resultado:

Aquí, podemos ver que nuestro texto está alineado verticalmente y también en el centro del div. Ahora, pasaremos al segundo método.

Método 2: Texto central verticalmente en CSS utilizando la propiedad de altura de línea

El "altura de la línea"La propiedad especifica la altura entre dos líneas dentro de los elementos. Se usa para crear espacio entre dos líneas que tienen texto.

Sintaxis

La sintaxis de la propiedad de altura de la línea se da como:

Línea de altura: valor

En la sintaxis dada anteriormente, especificaremos la altura de la línea como "valor".

Nota: En la propiedad de la altura de la línea, no podemos dar un valor negativo.

Ejemplo

Ahora, utilizaremos la propiedad de algodón de línea de línea para establecer texto en el centro vertical del . Para hacerlo, en el archivo CSS, establezca el valor de la propiedad de altura de línea en "150px":

.centro
Ancho: 450px;
Altura: 200px;
borde: 7px doble;
Línea de altura: 150px;

Esto nos dará el siguiente resultado:

Método 3: Texto central verticalmente en CSS usando relleno

Para crear espacio entre el borde de un elemento y su contenido, el "rellenoSe utiliza la propiedad. Es una propiedad abreviada de CSS que se puede utilizar para establecer el relleno de todos los lados en una sola línea.

Sintaxis

La sintaxis de la propiedad del relleno es:

relleno: arriba a la parte inferior derecha a la izquierda

Aquí está la descripción de los valores dados anteriormente de la propiedad mencionada:

• arriba: Se usa para crear espacio desde la parte superior.
• bien: Se usa para crear espacio desde la derecha.
• botón: Se usa para crear espacio desde la parte inferior.
• izquierda: Se usa para crear espacio desde la izquierda.

Nota: Especificar dos valores significará el relleno desde la parte superior e inferior y el relleno de izquierda y derecha; Sin embargo, si se agrega un valor, el relleno se aplicará a los cuatro lados.

Ejemplo

Aquí, estableceremos el valor del relleno como "10%" y "0%", Donde el primer valor indica el relleno superior e inferior y el segundo indica relleno de izquierda a derecha. Además, solo queremos centralizar el texto verticalmente para que establezcamos el segundo valor en "0":

.centro
borde: 7px doble;
relleno: 10% 0;

Después de la implementación del código dado, vaya al archivo HTML, ejecútelo y verifique la siguiente salida:

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

Conclusión

Para centrar el texto verticalmente, use el "Flexbox","altura de la línea" y "relleno"Propiedades de CSS. Estas propiedades le permiten establecer la altura dentro del contenido y el borde del elemento. En este artículo, explicamos cómo centrar el texto utilizando verticalmente tres métodos diferentes y proporcionamos un ejemplo de cada método.