¿Cómo centrar texto HTML? Aligned Center y Justified
February 05, 2025
Table of contents
Quick Access
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
Related Blogs
Contabilidad robótica para la industria bancaria
RPA vs BPM Automation
.jpg "software de gestion de tripulacion maritima")
Software de gestión de tripulaciones de barcos más populares
-1).jpg "software de gestion de flotas maritimas")
Software de gestión de flotas marítimas para ahorrar dinero
Mejores prácticas para una empresa de servicios de consultoría de RPA
