Un texto se puede agregar fácilmente en cualquier lugar, pero sin alineación, puede parecer impresentable y menos atractivo. El texto desalineado también puede perturbar el aspecto general de una página web. Para abordar este tipo de cosas en las aplicaciones web, podemos usar algunas propiedades útiles de CSS que lo ayudarán a alinear textos en poco tiempo.
Este artículo demostrará cómo alinear texto verticalmente en CSS.
¿Cómo alinear texto verticalmente en CSS?
En CSS, puede usar las siguientes propiedades para alinear el texto verticalmente:
-
- propiedad de altura de línea
- propiedades de visualización y alineación de elementos
¡Ahora, repasemos cada método uno por uno!
Método 1: usar la propiedad de altura de línea para alinear el texto verticalmente en CSS
Los ' altura de la línea La propiedad ” especifica el área debajo y hacia arriba de los elementos en línea. Establece la distancia de un texto de otros elementos. Usando la propiedad de altura de línea, el texto se puede alinear fácilmente verticalmente hacia el centro.
Ejemplo
Aquí hay un texto dentro de un cuadro (borde) actualmente ubicado en el lado superior izquierdo. Alineemos este texto al centro vertical y horizontalmente:
Ahora avancemos hacia el siguiente método. “ Caja flexible ” es un diseño unidimensional que le permite formatear HTML. También puede utilizarlo para alinear elementos vertical u horizontalmente. Entonces, tomemos un ejemplo y alineemos un texto verticalmente con la ayuda del flexbox. Ejemplo En primer lugar, haremos que nuestro contenedor sea flexible estableciendo el valor de ' monitor ” propiedad como “ flexionar ”. A continuación, utilice el ' alinear elementos ” propiedad para colocar el contenido en el centro verticalmente. Además, para alinear el contenido en el centro horizontalmente, el “ justificar-contenido Se utilizará la propiedad ”: En CSS, el texto se puede alinear verticalmente fácilmente con la ayuda del ' altura de la línea ' propiedad. También puede utilizar el “ caja flexible “ para la alineación vertical del texto con “ monitor ' y ' alinear elementos ' propiedades. Flexbox es un diseño unidimensional y se utiliza simplemente para la alineación vertical u horizontal de elementos. Esta publicación ofreció dos métodos más fáciles que pueden ayudarlo a alinear el texto verticalmente en CSS.
Para hacerlo, agregue un contenedor “
Mejor sitio web educativo !
división >
La caja se forma usando un “ 3 píxeles 'frontera y' 250px ' altura. Los ' tamaño de fuente ” propiedad se usa con el valor “ 24 píxeles ” para hacer visible la fuente. Asignaremos div a “ altura de la línea ' de ' 250px ” para alinear su texto verticalmente en el medio. A continuación, usaremos el “ texto alineado ” propiedad para alinear el texto en el centro:
altura de línea: 250px;
alineación de texto: centro;
tamaño de fuente: 24px;
altura: 250px;
borde: 3px sólido;
}
Como puede ver, el texto se alineó verticalmente al centro usando line-height y horizontalmente al centro con la propiedad text-align. Método 2: Uso de la propiedad display y align-items para alinear el texto verticalmente en CSS
monitor: flexionar ;
alinear elementos: centro;
justificar-contenido: centro;
tamaño de fuente: 24px;
altura: 200px;
borde: 3px sólido;
}
El texto especificado se ha alineado al centro con éxito:
Hemos proporcionado métodos relacionados con la alineación de texto verticalmente en CSS. Conclusión