Cómo centrar un texto en HTML

como centrar texto en html

Para centrar el texto usando HTML, puedes usar la etiqueta <center>o usar una propiedad CSS. Para proceder, selecciona la opción que prefieras y sigue las instrucciones.

Usando las etiquetas <center></center>.

Una forma de centrar el texto es encerrarlo dentro de las etiquetas <center></center>. El siguiente cuadro tiene un ejemplo.

<center>Centra este texto!</center>

Insertar este texto dentro del código HTML produciría el siguiente resultado:

Centra este texto!

Nota: La etiqueta <center> se considera deprecated en html5. Aunque todavía puede funcionar, se espera que se elimine a favor del uso de CSS. Le recomendamos que utilice el método de hoja de estilo (que se muestra a continuación) para centrar texto en HTML.

Usando una propiedad de hoja de estilo

Puede centrar texto con CSS especificando la propiedad text-align del elemento a centrar.

Centrar algunos bloques de texto

Si sólo tiene uno o unos pocos bloques de texto que necesita centrar, puede hacerlo añadiendo el atributo style a la etiqueta de apertura del elemento y eligiendo la propiedad "text-align". En el siguiente ejemplo, lo hemos añadido a la etiqueta <p>.

<p style="text-align:center">Centra este texto usando css!</p>

Observe que para aplique el valor de la propiedad "text-align" se estableció en "center", lo que indica que debe alinear el texto el elemento de forma centrada.

Centra este texto usando css!

Centrar múltiples bloques de texto

Si tiene muchos bloques de texto que le gustaría centrar, puede usar CSS dentro de las etiquetas <style></style> en la sección de cabecera de la página o en una hoja de estilo externa. Mira el código de ejemplo a continuación para ver cómo centrar contenido html dentro de las etiquetas <p></p> y <h1></h1>

<style>
 h1 {text-align: center;}
 p {text-align: center;}
</style>

Compruébelo usted mismo en jsBin

El texto se centrará dentro de cada conjunto de etiquetas en la página. Si desea que algunos párrafos estén centrados mientras que otros no, puede crear una clase CSS como se muestra en el siguiente código.

<style>
.center {
text-align: center
}
</style>

Si está creando una clase center, como se muestra en el ejemplo anterior, se puede centrar un párrafo usando el código de abajo, que llama a la clase center:

<p class="center">Centrar este texto!</p>

Una vez creada una clase, se puede aplicar a cualquier etiqueta HTML. Por ejemplo, si desea centrar un titulo en html, puede añadir class="center" a la etiqueta <h1> u otra etiqueta de encabezado.