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:

CSS
 
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:

HTML
 
<!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:

HTML
 
<!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:

HTML
 
<!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:

HTML
 
<!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:

HTML
 
<!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:

HTML
 
<!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:

HTML
 
<!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:

HTML
 
<!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 como margin, float, display: flex, o display: grid.
  • Para centrar elementos de bloque (como <div> o <h1>) horizontalmente, generalmente se utiliza la propiedad margin: 0 auto; en lugar de text-align: center;.
  • La propiedad text-align se hereda. Esto significa que si aplicas text-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!