Propiedad text-align

Ejemplos de uso

A pesar de su nombre, la propiedad text-align no sólo controla la alineación del texto. En realidad, esta propiedad establece la alineación de los contenidos (texto, imágenes) que se encuentran dentro de un elemento de bloque.

El valor inicial de la propiedad text-align depende a su vez del valor de la propiedad direction. Si el texto se escribe de izquierda a derecha (direction: ltr) el valor inicial de text-align es left. Por el contrario, el valor inicial de text-align es right cuando el texto se escribe de izquierda a derecha (direction: rtl).

La propiedad text-align define cuatro valores para alinear los contenidos a la izquierda (left), a la derecha (right), centrados (center) o justificados (justify). El siguiente ejemplo muestra cuatro párrafos iguales con diferentes valores en sus propiedades text-align:

Además del texto, la propiedad text-align alinea todos los contenidos que se encuentran dentro del elemento sobre el que se aplica esta propiedad. El siguiente ejemplo muestra cómo se alinean el texto y la imagen de un elemento <div> al que se aplica la propiedad text-align:

text-align: left
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.

text-align: right
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.

text-align: center
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.

text-align: justify
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.

Como la propiedad text-align alinea los contenidos de un elemento, no se puede utilizar directamente sobre el contenido que se quiere alinear. Si se considera el siguiente ejemplo:

.imagen1 { text-align: center; }
div      { text-align: center; }

<img class="imagen1" src="imagen.png" />

<div>
  <img src="imagen.png" />
</div>

La única imagen que se muestra centrada es la que se encuentra dentro del <div>, ya que la propiedad text-align no alinea un elemento sino sus contenidos:

El valor justify indica que los contenidos del elemento se deben mostrar de forma justificada, es decir, igualando la longitud de todas las líneas del texto. El estándar de CSS 2.1 no establece el algoritmo que se debe utilizar para justificar los contenidos, por lo que cada navegador define su propio algoritmo.

El principal problema del valor justify es que los navegadores no son capaces de dividir con guiones las palabras que no caben enteras en una línea, tal y como hacen todos los procesadores de texto avanzados. Por este motivo, este valor hace que el texto muestre espacios en blanco demasiado grandes, sobre todo en las columnas de texto estrechas:

La propiedad text-align solo alinea los contenidos formados por elementos en línea, por lo que los elementos de bloque como las tablas y los <div> no se pueden alinear con esta propiedad. Si se considera el siguiente ejemplo:

div { text-align: center; }

<div>
  <table>
    ...
    <td>Celda 1-1</td>
    <td>Celda 1-2</td>
    ...
  </table>
</div>

La regla CSS anterior indica que los contenidos del elemento <div> se deben centrar, por lo que: - Como la tabla es un elemento de bloque, ignora la alineación de la propiedad text-align - Como la propiedad text-align se hereda, las celdas de la tabla si que muestran sus contenidos centrados

Los navegadores muestran el ejemplo anterior de la siguiente manera:

Para centrar horizontalmente la tabla, se pueden utilizar los márgenes automáticos:

div   { text-align: center; }
table { margin: auto; }

<div>
  <table>
    ...
    <td>Celda 1-1</td>
    <td>Celda 1-2</td>
    ...
  </table>
</div>

Las nuevas reglas CSS ahora si que muestran una tabla centrada respecto de su elemento contenedor y con todos sus contenidos también centrados: