¿Cómo centrar texto HTML? Aligned Center y Justified
Tabla de contenido
Acceso Rápido
El centrado de texto en HTML es una de las tareas más comunes en el diseño web. Ya sea que necesites alinear un título, un párrafo o un bloque de contenido, existen diferentes formas de lograrlo.
En este artículo, exploraremos cómo centrar texto HTML utilizando las propiedades CSS text-align: center; y text-align: justify;, explicando sus diferencias y aplicaciones.
¿Cómo centrar texto HTML con CSS?
Para centrar texto en HTML, se utiliza la propiedad text-align en CSS. A continuación, un ejemplo de cómo centrar texto HTML dentro de un contenedor:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centrar Texto HTML</title>
<style>
.centrado {
text-align: center;
}
</style>
</head>
<body>
<p class="centrado">Este texto está centrado en HTML.</p>
</body>
</html>
En este ejemplo, la clase .centrado se encarga de alinear el texto al centro.
Usando text-align: center; para centrar texto HTML
El método más sencillo para centrar texto HTML es aplicar text-align: center;. Esta propiedad funciona bien en elementos de tipo bloque, como <p>, <div>, <h1>, entre otros.
p {
text-align: center;
}
Este código hará que todos los párrafos de la página se centren horizontalmente.
Sin embargo, este método no funciona para elementos inline, como <span>. Para centrar esos elementos, se debe usar display: block; o flexbox.
Usando text-align: justify; para justificar texto en HTML
Si en lugar de centrarlo quieres justificar el texto, puedes usar text-align: justify;. Esto distribuye el contenido uniformemente a lo largo del ancho del contenedor.
div {
text-align: justify;
}
Esto es útil en textos largos, mejorando la lectura y el diseño visual.
¿Cuándo usar text-align: center; y text-align: justify;?
text-align: center;: Se recomienda para encabezados, citas y textos cortos.text-align: justify;: Ideal para artículos, noticias o párrafos largos en diseños profesionales.
Ambos métodos permiten centrar texto HTML dependiendo del contexto en el que se utilicen.
Saber cómo centrar texto HTML es esencial para mejorar la apariencia de una web. Mientras que text-align: center; es ideal para alineaciones centrales, text-align: justify; proporciona un formato estructurado y profesional. Dependiendo de la necesidad, podrás elegir el método adecuado para cada caso.
Te recomendamos este video
Blogs relacionados
Outsourcing de TI para análisis de data y ML
Compañía de outsourcing de TI para proyectos de software, IA y automatización
Cómo trabajar con una empresa de desarrollo de aplicaciones híbridas
¿Cómo automatizar la generación de leads?
Herramientas de automatización de marketing: Integraciones y beneficios
