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.

Cómo alinear el texto en HTML5

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>

Cómo centrar un encabezado en HTML?

Para centrar un encabezado en HTML, puedes usar la etiqueta <h1> o (h2, h3….) y aplicar el estilo text-align: center al <h1>. Te dejamos un ejemplo para que lo entiendas de forma sencilla y rápida:

<h1 style="text-align: center;">El titulo a centrar</h1>

Antes de HTML5: Usando la etiqueta <center>

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: