Centrar texto en HTML con CSS
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 estructura 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 instrucción, el texto correspondiente se formatea horizontalmente. Durante mucho tiempo, se usó para este propósito la etiqueta HTML <center>, que ahora está obsoleta. Este método ya no es compatible desde HTML5.
- Tiempo de actividad de 99.99 % y seguridad garantizada
- Aumenta el rendimiento 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 especifica la instrucción para centrar un texto en HTML dentro de la etiqueta style. Este proceso se puede ilustrar fácilmente con un pequeño ejemplo. En el siguiente código, centramos el título, el texto y un contenedor 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>De este modo, la estructura del documento se define de antemano. Esto garantiza que el código se mantenga ordenado y se eviten errores.
- Certificado SSL Wildcard gratis
- Registro privado
- Función Domain Connect para una configuración DNS simplificada gratis
La obsoleta etiqueta HTML <center>
En versiones anteriores del lenguaje de programació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 compatible, debes recurrir a la solución con CSS. La sintaxis de <center> para texto HTML era la siguiente:
<center><p>Texto</p></center>En el siguiente ejemplo puedes ver cómo se utilizaba exactamente la etiqueta HTML <center> en la práctica. A diferencia de la solución moderna, se tenía que cambiar el código directamente en el cuerpo para centrar el texto en HTML. Dependiendo de la extensión y la estructura, esto resultaba en un código desordenado y era significativamente 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>El resultado se vería más o menos así:
Todo lo que necesitas saber sobre el Hypertext Markup Language lo encuentras en nuestra Digital Guide. Te explicamos, 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.