Cómo centrar el texto en HTML


como centrar texto en html

Muchas son las veces en que deseamos centrar un texto, y para centrar un texto usando HTML, se puede usar la etiqueta <center> o usar una propiedad CSS. Veamos este código mas a fondo!

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>Centre este texto!</center>

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

Centre este texto!
La etiqueta <center> ahora se considera obsoleta. 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 el texto en HTML.

Uso de 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, los hemos añadido a la etiqueta <p>:

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

Observe que el valor de la propiedad “text-align” se estableció en “center”, lo que indica que el elemento debe estar centrado.

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. Vea el código de ejemplo a continuación para saber cómo configurar todo el texto dentro de las etiquetas <p></p> para que estén centradas.

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

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

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

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

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

Una vez creada una clase, se puede aplicar a cualquier etiqueta HTML. Por ejemplo, si desea que el encabezado esté centrado, puede añadir class=”center” a la etiqueta <h1> u otra etiqueta de encabezado.