¿Qué debo usar para alinear mi texto al centro dentro de un div?

Hola.

Entonces, en realidad, la forma más simple de alinear cualquier longitud o altura de texto dentro de un elemento DIV es establecer su propiedad css como text-align: center; [¿puede haber cometido un error ortográfico en la regla de estilo CSS?]

Pero veamos algunos casos en los que la alineación central del texto es aplicable para 1 línea en todos los tamaños de pantalla y varias líneas en todos los tamaños de pantalla:

Versión 1: alineación vertical y horizontal del texto (una sola línea) en todos los tamaños de pantalla:

Línea número 1

Así que imaginemos que la etiqueta de párrafo en el elemento div en el código de ejemplo anterior, debe tener una alineación central vertical y horizontal.
Deje que el elemento div tenga una altura de, digamos, 200 px y ancho: 100% [elemento de bloque predeterminado]
Use reglas de estilo CSS, text-align: center y line-height: 200px para la etiqueta de párrafo y esto debería funcionar.

Versión 2: alineación vertical y horizontal del texto (varias líneas) en todos los tamaños de pantalla:

Aquí se está escribiendo algún contenido / datos de texto enorme

Para líneas múltiples, primero intente hacer que parentDiv como se muestra en el código de ejemplo anterior se establezca en position: relative. Digamos que tiene una altura de 100vh [altura de pantalla completa].
Luego, apunte al elemento childDiv , establezca la posición en absoluto. Set top: 50%, set transform: translateY (-50%), set left: 0;
Ahora debería poder ver los resultados del manejo de texto de varias líneas para la alineación central [vertical y horizontal].

Espero que esto ayude. Mire en Internet los detalles de alineación de texto, si ha entendido mis ideas básicas sobre cómo podría hacer esto, entonces otras cosas deberían ser fáciles para usted.

Feliz codificación y que tengas un buen día.

Desarrollo webDiseñoHojas de estilo en cascadaHTMLHTML5web

Texto alineado vertical y horizontalmente en Bootstrap Div

Cambie el tamaño de la ventana de su navegador para ver la capacidad de respuesta de esta página.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et

dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip

ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occasionecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est

PD> Si desea tener este efecto en una imagen, debe hacer que Image Responsive use la clase Bootstrap img-responsive en su etiqueta img .

Tarun

Si simplemente tiene una sola etiqueta

también podría usar CSS interno simple (no tiene que vincular un archivo CSS [CSS externo], simplemente escriba lo siguiente en la etiqueta y estará listo para comenzar ) como sigue:

Pero esto podría no ser útil si elige agregar más etiquetas

en el futuro, ya que haría cambios en cada etiqueta

en la página web, por lo que podría agregar una clase o identificación a su

para cambiarlo simplemente por:

HTML :

CSS :

.div1 {
alinear texto: centro;
}

Aquí nuevamente tiene una opción para ir a CSS interno o CSS externo (solo use to add the CSS file.

Nitish Prajapati

He usado muchos métodos para lograr esto. Pero, hasta ahora, mi favorito sería usar la clave de transformación .

centrado verticalmente {
posición: relativa;
arriba: 50%;
transform: perspectiva (1px) translateY (-50%);
}

Nitish Prajapati

Simplemente puede usar la etiqueta

alrededor del elemento que desea alinear en el centro.
Por ejemplo, si desea alinear el elemento p, puede hacerlo como:

Soy un párrafo

Nitish Prajapati

TEXTO AQUÍ

Utilizar esta

Varun Gujarathi

Se necesitan 5 atributos para alinear cualquier cosa. son la altura, el ancho, la posición, la izquierda, la parte superior … use estos atributos que se encontrarán en el medio … si no usa las propiedades html 5 de flex.

Shubam Bharti

alinear texto: centro

Sivaranjini Senthilvel

Propiedad flex del usuario.

Set –

pantalla: flex;

alinear elementos: centro;

justify-content: centro

En el div.

Vinoth Kumar

Bueno, puedes usar la clase bootstrap para hacer eso así;

Su texto en cualquier otra etiqueta que necesite