[CSS] Fundamentos de la alineación centrada
Este tutorial explica cómo centrar texto usando la propiedad text-align: center; en CSS.
🔹 Código parcial
<div class="text-center">
El texto se mostrará centrado.
</div>
<style>
.text-center {
text-align: center;
}
</style>
💻 Código completo funcional (Este código funciona por sí solo como HTML)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Texto centrado</title>
<style>
.text-center {
text-align: center;
}
</style>
</head>
<body>
<div class="text-center">
El texto se mostrará centrado.
</div>
</body>
</html>
🧩 Consejos prácticos de uso
text-align: center; es una de las propiedades más básicas de CSS para centrar texto. También afecta a los elementos en línea como imágenes o botones, por lo que es una herramienta sencilla pero poderosa para la alineación.
📱 Consideraciones para diseño responsivo
Mantiene el texto centrado incluso cuando cambia el ancho de pantalla, lo que lo hace eficaz para diseños móviles, como encabezados o avisos. Sin embargo, si deseas centrar un bloque completo, también debes usar margin: 0 auto;.
Si bien centrar puede atraer la atención del usuario, su uso excesivo puede dificultar la lectura. Úsalo con moderación y según el contexto.
🎯 Técnicas prácticas para la alineación centrada
text-align: center; es una propiedad sencilla pero muy versátil. Se puede aplicar no solo a elementos en línea, sino también a elementos con display: inline-block;, lo que permite alinear al centro elementos como los ítems de un menú de navegación en una amplia variedad de casos.
📊 Alinear texto de varias líneas
Para centrar un párrafo completo, basta con envolverlo con <p class="text-center">. Sin embargo, si el texto es largo, se recomienda añadir un límite de ancho (por ejemplo, max-width: 600px;) para mejorar la legibilidad y la presentación.
🖼️ Diseño mixto de imágenes y texto
Para centrar una imagen y su pie de foto, envuélvelos en un <figure class="text-center">. Como las imágenes son elementos de bloque, también se debe aplicar margin: 0 auto;. En el caso de <figcaption>, que es un elemento en línea, text-align: center; es suficiente para centrar el texto.
Es importante tener en cuenta que la alineación centrada tiene un efecto de "enfatizar", por lo que abusar de ella puede hacer que los elementos verdaderamente importantes pasen desapercibidos. Limita su uso a títulos o notas destacadas. En formularios, las etiquetas alineadas a la izquierda suelen ser más fáciles de leer para los usuarios.
En diseño responsivo, también es útil volver a la alineación a la izquierda en pantallas pequeñas usando media queries, como en @media (max-width: 768px) { .text-center { text-align: left; } }. Es importante elegir la alineación óptima según el contexto.