¿Cómo puedo centrar el texto dentro de un div?

Al diseñar páginas web, los desarrolladores pueden agregar varios componentes, incluidas imágenes, texto, tablas y otras. Además, el texto puede estar alineado en un DIV utilizando múltiples propiedades CSS. El método más popular para centrar horizontalmente es utilizar el "texto alineado" atributo. Además, también puedes usar el "altura de la línea" y "alinear vertical"Atributos para alinear verticalmente el texto.

Esta publicación indicará el método para centrar el texto verticalmente y horizontalmente dentro de un div.:

Cómo centrar el texto horizontalmente dentro de un div?

Para centrar el texto horizontalmente dentro de un div, consulte el procedimiento dado.

Paso 1: Haz un contenedor Div

Inicialmente, cree un contenedor Div con la ayuda del "" elemento. Luego, inserte un "identificación"Atributo dentro de la etiqueta de apertura del div Div. Después de eso, incruste algún texto entre la etiqueta Div:

Linuxhint es uno de los mejores sitios web para la creación de contenido.

Producción

Paso 2: Acceder al contenedor Div para alinear el texto

Ahora, acceda al contenedor Div con la ayuda del "identificación"Nombre del atributo con selector"#”Y aplique las siguientes propiedades de CSS:

#alineado-contenido
Ancho: 80%;
margen: 0 auto;
relleno: 20px;
Antecedentes: #C8EDF3;
Text-Align: Center;
Color: RGB (49, 15, 240);

Aquí:

• • "anchoSe utiliza la propiedad para establecer el tamaño de ancho del contenedor.
  • "margen"Especifica un espacio en blanco fuera del contenedor.
  • "relleno"Define un espacio dentro del límite del elemento.
  • "fondo"Establece el color de fondo en la parte posterior del elemento.
  • "texto alineado"La propiedad se utiliza para establecer la alineación del texto como"centro".
  • "color"Especifica un color para el texto dentro del límite.

Se puede observar que hemos centrado con éxito el texto alineado horizontalmente dentro del Div creado:

Cómo centrar el texto verticalmente dentro de un div?

Para centrar el texto verticalmente dentro de un contenedor Div, siga las instrucciones proporcionadas.

Paso 1: Acceda al contenedor Div

En primer lugar, acceda al contenedor Div creado.

Paso 2: Aplicar propiedades CSS al texto centrado verticalmente

Luego, aplique las propiedades CSS enumeradas a continuación para centrar el texto verticalmente en un DIV:

#alineado-contenido
Display: Cel-Cell;
Ancho: 300px;
Altura: 150px;
relleno: 10px;
color azul;
Color de fondo: RGB (248, 215, 166);
borde: 3px discontinuo #f09d03;
Align vertical: medio;

Según el fragmento de código anterior:

• • Selecciona el "mostrar"Eso especifica el comportamiento de visualización del elemento como"celda", Lo que significa que actúa como la celda de la tabla en el elemento div.
  • "ancho"La propiedad especifica el tamaño del ancho del elemento.
  • "altura"Establece la altura del elemento.
  • "relleno"Define un espacio en blanco dentro del elemento.
  • "color"Se utiliza para configurar el color del texto dentro del elemento.
  • "color de fondo"Especifica el color de la parte trasera del elemento.
  • "borde"La propiedad define un límite en un elemento.
  • "alinear vertical"La propiedad se utiliza para establecer la alineación vertical de un elemento definido en el"medio".

Producción

Ha aprendido sobre el procedimiento completo para centrar el texto dentro del contenedor en ambos sentidos, vertical y horizontalmente.

Conclusión

Para centrar el texto vertical y horizontalmente dentro de un div, primero, cree un contenedor DIV con la ayuda de elemento y acceda utilizando el selector. Luego, aplique propiedades CSS en las que "texto alineado"La propiedad se utiliza para la alineación horizontal y"alinear vertical"Establece la alineación vertical. Esta publicación demostró los métodos para centrar el texto vertical y horizontalmente dentro de un div.