La etiqueta <center> para centrar texto en HTML fue eliminada con HTML5. Desde entonces, para centrar texto en HTML, se utiliza CSS. Dado que el parámetro necesario text-align ya define la es­tru­c­tu­ra del documento dentro de la etiqueta style, el código se vuelve más ordenado y se pueden evitar errores.

¿Cómo centrar texto en HTML?

Para centrar texto en un documento HTML, hoy se utiliza el comando CSS text-align. Con esta in­s­tru­c­ción, el texto co­rre­s­po­n­die­n­te se formatea ho­ri­zo­n­ta­l­me­n­te. Durante mucho tiempo, se usó para este propósito la etiqueta HTML <center>, que ahora está obsoleta. Este método ya no es co­m­pa­ti­ble desde HTML5.

Web Hosting
El hosting que crece con tu proyecto
  • Tiempo de actividad de 99.99 % y seguridad ga­ra­n­ti­za­da
  • Aumenta el re­n­di­mie­n­to según el tráfico de tu página web
  • Incluye dominio, SSL, e-mail y soporte 24/7

Centrar texto en HTML con text-align en CSS

Desde HTML5, se es­pe­ci­fi­ca la in­s­tru­c­ción para centrar un texto en HTML dentro de la etiqueta style. Este proceso se puede ilustrar fá­ci­l­me­n­te con un pequeño ejemplo. En el siguiente código, centramos el título, el texto y un co­n­te­ne­dor HTML div en nuestro documento HTML:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
h1 {text-align: center;} 
p {text-align: center;} 
div {text-align: center;} 
</style> 
</head> 
<body> 
<h1>Aquí va el encabezado</h1> 
<p>Aquí va el contenido</p> 
<div>En este lugar se encuentra un div</div> 
</body> 
</html>
html

De este modo, la es­tru­c­tu­ra del documento se define de antemano. Esto garantiza que el código se mantenga ordenado y se eviten errores.

Compra y registra tu dominio ideal
  • Ce­r­ti­fi­ca­do SSL Wildcard gratis
  • Registro privado
  • Función Domain Connect para una co­n­fi­gu­ra­ción DNS si­m­pli­fi­ca­da gratis

La obsoleta etiqueta HTML <center>

En versiones an­te­rio­res del lenguaje de pro­gra­ma­ción web, se utilizaba la etiqueta HTML <center>, que te mostramos para completar este artículo. Sin embargo, dado que está obsoleta y ya no es co­m­pa­ti­ble, debes recurrir a la solución con CSS. La sintaxis de <center> para texto HTML era la siguiente:

<center><p>Texto</p></center>
html

En el siguiente ejemplo puedes ver cómo se utilizaba exac­ta­me­n­te la etiqueta HTML <center> en la práctica. A di­fe­re­n­cia de la solución moderna, se tenía que cambiar el código di­re­c­ta­me­n­te en el cuerpo para centrar el texto en HTML. De­pe­n­die­n­do de la extensión y la es­tru­c­tu­ra, esto resultaba en un código des­or­de­na­do y era si­g­ni­fi­ca­ti­va­me­n­te más propenso a errores:

<!DOCTYPE html> 
<html> 
<body> 
<p>Aquí habría un texto que no está centrado.</p> 
<center><p>Aquí habría un texto que está centrado.</p></center> 
</body> 
</html>
html

El resultado se vería más o menos así:

Imagen: Ejemplo de centrado HTML
En el ejemplo, puedes ver que el texto se sitúa en el centro de la etiqueta central.
Consejo

Todo lo que necesitas saber sobre el Hypertext Markup Language lo en­cue­n­tras en nuestra Digital Guide. Te ex­pli­ca­mos, por ejemplo, cómo dar tus primeros pasos con HTML. También, si te preguntas cómo incluir CSS en HTML, te ofrecemos el tutorial adecuado con muchos ejemplos prácticos.

Ir al menú principal