Cuando estás maquetando una página web, una de las primeras cosas que sueles necesitar es cambiar la alineación del texto. Por ejemplo, centrar un título, colocar una fecha a la derecha o devolver a la izquierda un párrafo que ha heredado otra alineación. Son ajustes sencillos, pero conviene entender sobre qué elemento se aplican y qué efecto tienen.
Aunque solemos hablar de alinear texto en HTML, esta tarea corresponde a CSS. HTML nos permite definir el contenido y su estructura (un título, un párrafo, una lista), mientras que CSS se encarga de su presentación. Para cambiar la alineación horizontal utilizaremos principalmente la propiedad text-align. Más adelante veremos también cómo colocar el texto en el centro vertical de una caja, porque son dos necesidades distintas y no se resuelven del mismo modo.
Cómo alinear texto con CSS
La propiedad text-align permite definir cómo se alinean las líneas de texto dentro de un elemento. Se aplica, por ejemplo, a un párrafo o a un contenedor que incluye varios elementos con texto.
Vamos a empezar con un caso sencillo. Tenemos este párrafo en HTML:
<p class="texto-centrado">
Este párrafo se mostrará alineado al centro.
</p>Para centrar su texto, añadimos la siguiente regla a nuestra hoja de estilos CSS:
.texto-centrado {
text-align: center;
}El atributo class relaciona el párrafo con la regla de CSS. En este caso hemos elegido el nombre texto-centrado, pero podríamos utilizar otro, siempre que coincida en ambos sitios. Fíjate en que en CSS escribimos un punto delante del nombre para indicar que estamos seleccionando una clase.
Si estás preparando una página de prueba y todavía no tienes una hoja de estilos, puedes colocar esa misma regla dentro de una etiqueta <style> en el <head> del documento HTML:
<head>
<style>
.texto-centrado {
text-align: center;
}
</style>
</head>También es posible aplicar la propiedad directamente al elemento mediante el atributo style:
<p style="text-align: center;">
Este párrafo se mostrará alineado al centro.
</p>Esta última opción puede servir para una prueba puntual, aunque en una web suele resultar más cómodo mantener los estilos en una hoja CSS. Así puedes reutilizarlos y modificarlos sin tener que revisar cada elemento por separado.
En cualquiera de los casos, lo que se centra es el texto dentro del espacio disponible del párrafo. El elemento <p> conserva su posición y su anchura; text-align no centra la caja que lo contiene. Esta diferencia nos ayudará a entender algunos casos en los que la propiedad parece no hacer nada.
Alinear texto a la izquierda, a la derecha, al centro o justificarlo
Ahora que hemos visto cómo aplicar text-align, podemos cambiar su valor según la alineación que necesitemos. El funcionamiento es el mismo en todos los casos, aunque el resultado se aprecia mejor cuando el texto ocupa varias líneas.
Alinear texto a la izquierda
El valor left alinea las líneas de texto con el borde izquierdo del espacio disponible:
<p class="texto-izquierda">
Este párrafo está alineado a la izquierda. Si el contenido ocupa
varias líneas, todas comenzarán desde el mismo borde.
</p>.texto-izquierda {
text-align: left;
}En una página en español, lo habitual es que el texto ya aparezca alineado a la izquierda. Por eso, muchas veces no necesitarás indicarlo. Sí puede resultar útil cuando quieras cambiar una alineación que venga definida por los estilos de la web, como un párrafo dentro de una sección que tenga todo el texto centrado.
Alinear texto a la derecha
Para llevar el texto al borde derecho utilizamos el valor right:
<p class="texto-derecha">
Publicado el 19 de octubre de 2026
</p>.texto-derecha {
text-align: right;
}Puede servir para colocar una fecha, una firma o algún dato breve. Si el contenido ocupa varias líneas, todas quedarán alineadas por su extremo derecho, mientras que el borde izquierdo será irregular.
Alinear texto al centro
Como hemos visto en el primer ejemplo, el valor center centra el texto horizontalmente:
<h2 class="titulo-centrado">Servicios de desarrollo web</h2>.titulo-centrado {
text-align: center;
}Es un recurso habitual en títulos, encabezados de sección o textos breves. Si el contenido ocupa varias líneas, cada línea se centra de forma independiente dentro del elemento.
Conviene tener algo de cuidado al aplicarlo a párrafos largos. Como cada línea comienza en una posición diferente, seguir la lectura puede resultar más incómodo. Un título de dos líneas suele funcionar bien centrado; para una explicación de varios párrafos, normalmente prefiero mantener la alineación a la izquierda.
Justificar el texto
El valor justify ajusta el espacio entre las palabras para que las líneas alcancen tanto el borde izquierdo como el derecho:
<p class="texto-justificado">
Este párrafo tiene suficiente contenido para ocupar varias líneas.
El navegador ajustará el espacio entre las palabras para alinear
el texto con ambos bordes del elemento.
</p>.texto-justificado {
text-align: justify;
}Por defecto, la última línea no se estira hasta completar la anchura. Si el párrafo solo ocupa una línea, puede que no aprecies ninguna diferencia respecto a la alineación a la izquierda.
Aunque la justificación deja los bordes visualmente uniformes, puede generar huecos demasiado grandes entre palabras, especialmente en columnas estrechas. Es algo que conviene revisar en móvil antes de darlo por bueno. Para el cuerpo de un artículo como este, la alineación a la izquierda suele ofrecer una lectura más cómoda.
Alinear según la dirección de escritura con start y end
Además de los valores anteriores, podemos utilizar start y end. En lugar de señalar un lado fijo, alinean el texto al inicio o al final según su dirección de escritura:
.texto-inicio {
text-align: start;
}
.texto-final {
text-align: end;
}En un texto con dirección de izquierda a derecha, como es habitual en español, start corresponde a la izquierda y end a la derecha. En un texto con dirección de derecha a izquierda, como el árabe, ocurre al revés. La referencia es la dirección establecida para el elemento; estos valores no detectan el idioma ni cambian por sí solos la dirección de lectura.
Esta diferencia resulta útil en webs que ofrecen contenido en idiomas con distintas direcciones de escritura, porque permite reutilizar la misma regla sin fijar siempre la alineación a un lado concreto.
Cuando en un mismo párrafo se combinan textos con diferentes direcciones de lectura, entra en juego también la bidireccionalidad. Es una cuestión distinta de la alineación, sobre la que puedes ampliar información en el artículo dedicado a la propiedad unicode-bidi de CSS.
Aplicar la alineación a una parte de la página
En los ejemplos anteriores hemos utilizado clases para decidir qué elementos queremos alinear. Esto nos permite controlar dónde se aplica cada estilo. Si utilizásemos una regla como esta, centraríamos el texto de todos los párrafos de la página:
p {
text-align: center;
}Puede que sea lo que buscas en una prueba, pero en una web normalmente necesitarás algo más concreto. Por ejemplo, centrar el contenido de una presentación y mantener alineado a la izquierda el resto del documento.
Podemos aplicar text-align a un contenedor para que sus elementos descendientes hereden la alineación, sin tener que añadir una clase a cada título o párrafo:
<div class="presentacion">
<h2>Desarrollo web a medida</h2>
<p>Diseño y programación para tu próximo proyecto.</p>
<p>Cuéntame qué necesitas y vemos cómo darle forma.</p>
</div>.presentacion {
text-align: center;
}En este caso, tanto el título como los dos párrafos mostrarán su texto centrado. La propiedad se ha definido en el <div>, pero se transmite a los elementos que contiene mediante la herencia de CSS.
Cambiar la alineación de un elemento dentro del contenedor
Que una sección tenga el texto centrado no significa que todos sus elementos deban conservar esa alineación. Podemos definir otra para un párrafo concreto:
<div class="presentacion">
<h2>Desarrollo web a medida</h2>
<p>Diseño y programación para tu próximo proyecto.</p>
<p class="descripcion">
Cada proyecto tiene unas necesidades diferentes. Antes de empezar,
revisaremos qué debe hacer la web y cómo la utilizarán sus visitantes.
</p>
</div>.presentacion {
text-align: center;
}
.descripcion {
text-align: left;
}El título y el primer párrafo seguirán centrados, mientras que el texto de .descripcion se alineará a la izquierda. Una alineación definida directamente en el elemento tiene prioridad sobre la que recibiría por herencia.
Hay un matiz que viene bien conocer cuando trabajas con un sistema de maquetación visual o con una hoja de estilos que ya tiene sus propias reglas. Si un párrafo tiene definida una alineación, no heredará la del contenedor. Por ejemplo:
p {
text-align: left;
}
.presentacion {
text-align: center;
}Con estas reglas, el título de nuestra presentación heredará el centrado, pero los párrafos permanecerán alineados a la izquierda. Para centrarlos también, podemos seleccionarlos dentro de esa sección:
.presentacion p {
text-align: center;
}Por eso, cuando una parte del contenido no responde como esperabas, conviene comprobar si ya tiene una alineación aplicada. En el inspector del navegador puedes ver qué regla está definiendo su text-align y desde qué hoja de estilos llega.
Por qué a veces parece que text-align no funciona
Hay ocasiones en las que escribes text-align: center, recargas la página y el texto sigue donde estaba. Además de comprobar si otra regla de CSS está cambiando la alineación, conviene revisar sobre qué elemento has aplicado la propiedad y cuánto espacio tiene disponible.
Has aplicado la alineación a un elemento en línea
Un caso habitual es intentar centrar un texto aplicando la propiedad directamente a una etiqueta <span>:
<p>
<span class="texto-centrado">Este texto debería estar centrado.</span>
</p>.texto-centrado {
text-align: center;
}Por defecto, <span> es un elemento en línea y text-align no se aplica a este tipo de cajas. Para centrar ese texto dentro del párrafo, podemos colocar la clase en el propio <p>:
<p class="texto-centrado">
<span>Este texto ahora sí estará centrado.</span>
</p>Otra posibilidad sería cambiar el <span> a display: block, aunque no hace falta modificar su comportamiento si podemos resolver la alineación desde el elemento que lo contiene.
El elemento no tiene espacio para mostrar la alineación
La alineación se aprecia cuando hay espacio libre. Si la caja mide prácticamente lo mismo que su contenido, apenas habrá diferencia entre alinear el texto a la izquierda, a la derecha o al centro.
Por ejemplo, este párrafo utiliza width: fit-content, de modo que su anchura se ajusta al contenido cuando hay espacio suficiente:
.texto-centrado {
width: fit-content;
text-align: center;
}Aunque el texto esté centrado dentro del párrafo, la caja queda ajustada a él y no vemos el desplazamiento que quizá esperábamos. Si queremos centrar el texto respecto a toda la anchura disponible, tendremos que permitir que el párrafo ocupe ese espacio, por ejemplo, eliminando esa declaración de width.
Quieres centrar el contenedor, no su texto
También puede ocurrir que el texto esté bien alineado, pero lo que quieras mover sea la caja completa. Imagina un párrafo con una anchura limitada:
.descripcion {
max-width: 40rem;
text-align: center;
}El texto se centrará dentro del párrafo, pero, si hay espacio de sobra, el párrafo seguirá situado a la izquierda de su contenedor. Para centrar también la caja horizontalmente, podemos utilizar márgenes automáticos:
.descripcion {
max-width: 40rem;
margin-inline: auto;
text-align: center;
}Aquí cada propiedad tiene su cometido. margin-inline: auto centra la caja en el flujo normal de una página con escritura horizontal, mientras que text-align: center centra las líneas de texto de su interior. Si el párrafo ocupa toda la anchura disponible, no habrá espacio sobrante a los lados y los márgenes automáticos no producirán un cambio visible.
Estás utilizando atributos o etiquetas HTML antiguos
Si has buscado ejemplos por Internet, es posible que hayas encontrado código como <p align="center"> o la etiqueta <center>. Aunque los navegadores todavía pueden interpretarlos por compatibilidad con páginas antiguas, ambos están obsoletos y no deben utilizarse en HTML actual.
Para definir la alineación, utiliza CSS con cualquiera de las formas que hemos visto. Así podrás controlar su presentación desde los estilos y mantener un criterio común en toda la web.
Cómo centrar el texto también en vertical
Hasta ahora hemos alineado el texto horizontalmente, pero puede que necesites colocarlo también en el centro vertical de una caja. Es algo habitual en una cabecera, una tarjeta o un aviso con una altura mínima.
text-align no controla la alineación vertical. Para resolver este caso podemos utilizar Flexbox, que permite colocar el contenido dentro de un contenedor en ambos ejes.
Partimos de una caja con un título y un párrafo:
<div class="aviso">
<h2>Estamos preparando algo nuevo</h2>
<p>Pronto encontrarás aquí todos los detalles.</p>
</div>Y aplicamos estos estilos:
.aviso {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 16rem;
padding: 2rem;
box-sizing: border-box;
text-align: center;
}Con display: flex activamos Flexbox y con flex-direction: column colocamos el título y el párrafo uno debajo del otro. Al elegir esa dirección, justify-content: center centra el conjunto de elementos en vertical. Por su parte, text-align: center centra las líneas de texto horizontalmente.
La propiedad min-height establece una altura mínima para que exista espacio donde apreciar ese centrado vertical. Utilizamos una altura mínima en lugar de una altura fija para que la caja pueda crecer si el contenido necesita más sitio, por ejemplo, al verlo desde un móvil o al aumentar el tamaño del texto.
Centrar también los elementos dentro de la caja
En el ejemplo anterior, los elementos se estiran horizontalmente por defecto y su texto queda centrado dentro de ellos. Si además quieres que las cajas del título y del párrafo se ajusten a su contenido y se sitúen en el centro horizontal, puedes añadir align-items: center:
.aviso {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 16rem;
padding: 2rem;
box-sizing: border-box;
text-align: center;
}En esta disposición en columna, justify-content controla la colocación vertical y align-items la horizontal. Si cambias la dirección de Flexbox a una fila con flex-direction: row, esa correspondencia cambia. Por eso conviene fijarse en la dirección del contenedor antes de copiar las propiedades.
Por qué vertical-align: middle no centra un párrafo en una caja
Por su nombre, es fácil pensar que vertical-align: middle sirve para centrar cualquier texto en vertical. Sin embargo, vertical-align se utiliza para alinear elementos en línea, elementos de tipo inline-block y celdas de tabla. No coloca un párrafo en el centro vertical de un contenedor convencional.
Puede servir, por ejemplo, para ajustar la posición de un icono junto a un texto. Para centrar el contenido de una caja como la de nuestro aviso, puedes utilizar Flexbox con la configuración que acabamos de ver.
Referencias:
Deja una respuesta