La Propiedad TEXT-ALIGN

La propiedad text-align establece el alineamiento horizontal del texto en un elemento HTML.
La propiedad text-align
del CSS, establece el alineamiento horizontal del contenido dentro de un "Elemento de Bloque" o de un "Cuadro de Celda de Tabla", lo que significa que esta propiedad funciona como la propiedad vertical-align
, pero en lugar de alinear verticalmente esta lo hará en dirección horizontal.
El valor por predeterminado es de izquierda si la dirección es ltr, o de derecha si la dirección es rtl. Las palabras reservadas a utilizar como valor son: start
, end
, left
, right
, center
, justify
, justify-all
, o match-parent
.
Sintaxis CSS
text-align: left|right|center|justify|initial|inherit;
Valores de la Propiedad
Valor | Descripción |
---|---|
initial |
Se establece la propiedad a su valor inicial, es decir, a el valor predeterminado del elemento HTML. |
inherit |
Hereda el valor de su Elemento Padre, es decir, hereda el valor del elemento que lo contiene. |
left |
Alinea el texto a la izquierda. |
right |
Alinea el texto a la derecha. |
center |
Alinea el texto al centro. |
justify |
Estira cada línea para justificar el texto al mismo ancho, como periódicos o revistas. |
start |
Lo mismo que left si dirección es de izquierda a derecha y right si dirección es de derecha a izquierda. |
end |
Lo mismo que right si dirección es de izquierda a derecha y left si dirección es de derecha a izquierda. |
match-parent |
Similar a inherit , pero el valor los valores start y end son calculados de acuerdo a la dirección del elemento padre y es remplazado por valor start o end apropiado. |
JavaScript
Sintaxis DOM
object.style.textAlign="right"
La propiedad text-align
en CSS se utiliza para especificar la alineación horizontal del texto dentro de un elemento de bloque. Esto significa que controla cómo se disponen las líneas de texto dentro del contenedor del elemento.
Sintaxis Básica
La sintaxis básica para usar la propiedad text-align
es la siguiente:
selector {
text-align: valor;
}
Donde selector
es el elemento HTML al que quieres aplicar el estilo y valor
es la forma en la que deseas alinear el texto.
Valores de la Propiedad text-align
A continuación, exploraremos los diferentes valores que puede tomar la propiedad text-align
:
1. left
Este es el valor predeterminado para la mayoría de los navegadores. Alinea el texto al margen izquierdo del contenedor.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
.izquierda {
text-align: left;
border: 1px solid #ccc; /* Para visualizar el contenedor */
}
</style>
</head>
<body>
<div class="izquierda">
Este texto está alineado a la izquierda.
Es el valor predeterminado para la mayoría de los elementos de bloque.
</div>
</body>
</html>
2. right
Este valor alinea el texto al margen derecho del contenedor.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
.derecha {
text-align: right;
border: 1px solid #ccc; /* Para visualizar el contenedor */
}
</style>
</head>
<body>
<div class="derecha">
Este texto está alineado a la derecha.
Puede ser útil para ciertos tipos de contenido o diseños.
</div>
</body>
</html>
3. center
Este valor centra el texto horizontalmente dentro del contenedor.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
.centrado {
text-align: center;
border: 1px solid #ccc; /* Para visualizar el contenedor */
}
</style>
</head>
<body>
<div class="centrado">
Este texto está centrado horizontalmente.
Es comúnmente utilizado para encabezados, títulos o elementos decorativos.
</div>
</body>
</html>
4. justify
Este valor alinea el texto tanto al margen izquierdo como al derecho, añadiendo espacios entre las palabras para que cada línea tenga la misma longitud (excepto la última línea). Esto crea un aspecto más "justificado".
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
.justificado {
text-align: justify;
border: 1px solid #ccc; /* Para visualizar el contenedor */
width: 300px; /* Ancho fijo para ver el efecto */
}
</style>
</head>
<body>
<div class="justificado">
Este texto está justificado. Esto significa que el espacio entre las palabras se ajusta de manera que cada línea, excepto la última, tenga la misma longitud. Este efecto es común en periódicos y libros.
</div>
</body>
</html>
5. start
Este valor alinea el texto al principio de la línea. La dirección del inicio depende de la dirección de escritura del texto. En idiomas de izquierda a derecha (como el español), start
se comporta como left
. En idiomas de derecha a izquierda (como el árabe), start
se comporta como right
.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
.inicio {
text-align: start;
border: 1px solid #ccc; /* Para visualizar el contenedor */
}
</style>
</head>
<body>
<div class="inicio">
Este texto está alineado al inicio de la línea.
En este caso, se comportará como 'left'.
</div>
</body>
</html>
6. end
Este valor alinea el texto al final de la línea. Al igual que con start
, la dirección del final depende de la dirección de escritura del texto. En idiomas de izquierda a derecha, end
se comporta como right
. En idiomas de derecha a izquierda, end
se comporta como left
.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
.fin {
text-align: end;
border: 1px solid #ccc; /* Para visualizar el contenedor */
}
</style>
</head>
<body>
<div class="fin">
Este texto está alineado al final de la línea.
En este caso, se comportará como 'right'.
</div>
</body>
</html>
Ejemplos Prácticos
Aquí tienes algunos ejemplos de cómo podrías usar la propiedad text-align
en situaciones reales:
Ejemplo 1: Centrar un encabezado y un pie de página:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
footer {
text-align: center;
font-size: 0.8em;
color: #777;
}
</style>
</head>
<body>
<h1>Bienvenido a mi sitio web</h1>
<p>Este es el contenido principal de la página.</p>
<footer>
© 2025 Mi Sitio Web
</footer>
</body>
</html>
Ejemplo 2: Alinear un texto a la derecha en una barra de navegación:
<!DOCTYPE html>
<html>
<head>
<style>
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
background-color: #f0f0f0;
overflow: hidden;
}
nav li {
float: left;
}
nav li a {
display: block;
color: #333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav .menu-derecha {
float: right;
}
nav .menu-derecha a {
text-align: right; /* No es necesario aquí por el float */
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
<li class="menu-derecha"><a href="#">Cuenta</a></li>
</ul>
</nav>
<p>Contenido de la página.</p>
</body>
</html>
Nota: En el ejemplo de la barra de navegación, aunque podríamos usar text-align: right
en los enlaces del menú de la derecha, la alineación principal se logra mediante el uso de float: right
en el elemento <li>
. La propiedad text-align
se aplica al contenido dentro del elemento.
Consideraciones Importantes
- La propiedad
text-align
solo afecta la alineación horizontal del texto dentro de un elemento de bloque. No afecta la alineación de los elementos de bloque en sí mismos. Para eso, se utilizan otras propiedades comomargin
,float
,display: flex
, odisplay: grid
. - Para centrar elementos de bloque (como
<div>
o<h1>
) horizontalmente, generalmente se utiliza la propiedadmargin: 0 auto;
en lugar detext-align: center;
. - La propiedad
text-align
se hereda. Esto significa que si aplicastext-align
a un elemento padre, todos sus elementos hijos (si son elementos de texto o en línea) heredarán esa alineación.
Conclusión
La propiedad text-align
es una herramienta fundamental en CSS para controlar la disposición horizontal del texto en tus páginas web. Comprender sus diferentes valores y cómo aplicarlos te permitirá crear diseños más estructurados y visualmente atractivos. ¡Experimenta con los ejemplos y sigue explorando las posibilidades que ofrece CSS!