tutorial para centrar un texto en html

Cómo centrar un texto en HTML

Hay dos formas para centrar el texto en HTML, puedes usar una etiqueta HTML (obsoleta) o usar una regla CSS (método recomendado). En nuestro tutorial fácil y paso a paso, puedes ver la opción que prefieras y simplemente seguir las instrucciones.

Usando una regla CSS

Puedes centrar el texto con CSS mediante la propiedad text-align del elemento a centrar.

Centrar un párrafo

Si sólo tienes uno o unos pocos bloques de texto para centrar, añade el atributo style a la etiqueta de inicio del elemento y usa la propiedad “text-align”. En el siguiente ejemplo, los hemos añadido a la etiqueta

<p style="text-align:center">Centrame</p>

Observa que el valor de la propiedad “text-align” se establece en “center” para indicar que el elemento debe estar centrado.

Centrar varios párrafos

Si tienes muchos párrafos con texto para centrar, nuestra recomendación es que uses CSS dentro de las etiquetas en la sección de cabecera de la página o en una hoja de estilo CSS externa. Mira el código de ejemplo a continuación para ver cómo configurar todo el texto dentro de las etiquetas para que se centren.

p {
  text-align:center;
}

Con este código conseguimos que todos los textos que estén dentro de un <p></p> queden centrados. Si quieres que solo algunos párrafos estén centrados, mientras que otros no lo estén, puedes crear un selector de clase, como se ve en el código de abajo.

.centrado {
  text-align: center;
}

Si está creando un selector de clase llamado “centrado”, como en el ejemplo anterior, puede centrar un párrafo usando el código de abajo, que “llama” a la clase CSS “centrado” dentro de la etiqueta <p>.

<p class="centrado">Este texto quedará centrado gracias a una clase CSS!</p>
Consejo
Una vez que una clase se crea, la puedes aplicar a cualquier etiqueta HTML. Por ejemplo, si quieres que un encabezado esté centrado, puedes agregar la clase CSS “centrado” a la etiqueta h1 o a otra etiqueta de encabezado (h2, h3, h4)

Usando la etiqueta <center> (obsoleta)

Una forma de centrar el texto es enmarcarlo dentro de las etiquetas <center></center>. Un ejemplo sencillo en el siguiente código.

<center>Hola, estoy centrado con una etiqueta sencilla</center>

Si se inserta este texto en el código HTML se obtendría el siguiente resultado:

Recomendamos hoy:  Cómo abrir un archivo .CSV?
Hola, estoy centrado con una etiqueta sencilla
Consejo
La etiqueta center se considera obsoleta. Aunque todavía puede funcionar en todos los navegadores, se espera que se elimine en favor del uso de CSS. Recomendamos que uses el método anteriormente descrito para centrar textos en HTML.
Esperamos que con este articulo hayas aprendido a centrar un texto en HTML.
Si tienes algún comentario o pregunta, por favor deja un comentario abajo y te responderemos lo antes posible.

¿Alguna duda? Deja un comentario