Algunas de las nuevas opciones de text-align

La alineación de las cosas es algo que siempre suele provocar confusiones, sobre todo cuando recién se comienza a meter mano en una página web. Si queremos que algo se vea a la derecha, a la izquierda o en el centro, parecería que no siempre debemos usar las misma propiedades, a veces usamos float, a veces usamos text-align, a veces ... no podemos.

En realidad, no es algo tan complejo si se entiende que una cosa es el contenedor y otra cosa es el contenido (más información).

En una etiqueta sencilla como P:

<p> el texto </p>

la etiqueta en si misma es el contenedor y el texto es el contenido; podemos alinear ese texto con left, right o center pero, la etiqueta P en si misma, no se "mueve". Es algo fácil de ver si le ponemos un borde o un color de fondo; en este ejemplo, la dimensiono de tal forma que mida 300 pixeles, agregándole la propiedad width:

<p style="text-align:center;width:300px;"> el texto </p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Como se ve, lo que se centra es el contenido de la etiqueta, el texto, pero la etiqueta en si misma se ve a la izquierda que es lo que ocurre por defecto. Si quisiera centrarla, debería agregarle margin:0 auto:

<p style="text-align:center;margin:0 auto;width:300px;"> el texto </p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Hasta ahí, parece fácil pero, si quisiera alinearla a la derecha, usando text-align sólo podría modificar la forma en que se ve el texto, la etiqueta, continuaría viéndose a la izquierda. Usando margin: 0 auto podría centrarla pero, no habría forma de alinear la etiqueta P a la derecha a menos que le agregara un margin-right con un valor extremo que tal vez, desconozca:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Para colocar la etiqueta a la derecha, debería agregarle float:right:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

En resumen, en todos los casos, usando text-align right, left o center, puedo definir la alineación del texto (el contenido) pero eso no afectará, la alineación de etiqueta en si misma (el contenedor) que se debe establecer de modo separado agregándole propiedades extras como float left o right y ya que no existe un float:center, uso margin:0 auto si lo quiero centrar.

Pero ...

Los nuevos navegadores están agregando algunas opciones extras a esos valores que requieren el uso de prefijos:

-moz-left, -moz-center y -moz-right en Firefox
-webkit-left, -webkit-center y -webkit-right en Chrome
-ms-left, -ms-center y -ms-right en IE10

Parecen lo mismo pero obviamente, no lo son, la diferencia fundamental es que esos valores, no sólo afectan al contenido sino también al contenedor con lo que, de alguna manera, la diagramación puede simplificarse ya que evita los problemas que suele tener el uso de float.

Esto no significa que podemos hacer algo así para centrar el texto y la etiqueta:

<p style="text-align:-moz-center;width:300px;"> el texto </p>

sino que deberíamos usar algo así:

<div style="text-align:-moz-center;text-align:-webkit-center;text-align:-ms-center;">
  <p style="width:300px;"> el texto </p>
</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lo mismo si quisiéramos alinearlo a la derecha y a partir de ahí, el texto ya es independiente así que podemos alinear la etiqueta P a la derecha y centrar su contenido:

<div style="text-align:-moz-right;text-align:-webkit-right;text-align:-ms-right;">
  <p style="text-align:center;width:300px;"> el texto </p>
</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.