vagacode

Al margen de las fuentes en si mismas, los textos tienen propiedades que podemos definir para establecer su alineación.

La forma más común de alinear el contenido de un elemento es utilizando text-align y, aunque su nombre puede llevar a confusión, no es algo que sólo se aplica a los textos sino a cualquier otro contenido como una imagen:

<div style="text-align:center;">
	<img src="una_imagen">
</div>

La alineación de las cosas 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.

Que algo esté alineado (text-align) o que flote (propiedad float) no es lo mismo. Puede parecerlo pero es completamente diferente, de allí que muchas veces, nos encontramos con problemas cuando tratamos de ubicar algo en una determinada posición.

En realidad, no es algo tan complejo si se entiende que una cosa es el contenedor y otra cosa es el contenido.

Empecemos de cero y veamos una etiqueta sencilla como p:

<p>Lorem ipsum dolor sit amet ...</p>

La etiqueta p en si misma es el contenedor y el texto es el contenido.

Con esa propiedad podemos alinear su contenido pero, la etiqueta en si misma no se moverá. 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="background-color:#cde;text-align:center;width:300px;">Lorem ipsum dolor sit amet ...</p>

Como se ve, lo que se centra es el texto pero la etiqueta en si misma se ve a la izquierda que es lo que ocurre por defecto. En términos generales, para centrar un contenido debemos establecer esa propiedad en el contenedor y no en el contenido. Si quisiera centrar todo, debería establecer otra propiedad en el contenedor: margin:0 auto.

Hasta ahí, parece fácil pero se complica cuando quiero alinearla a la derecha ya que, insisto, 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 y para usar márgenes debería conocer el valor extremo de la ventana que puede ser variable.

Una de las posibilidades de alinear la etiqueta a la derecha, es usar float:right:

En resumen, en todos los casos, usando text-align puedo definir la alineación del contenido pero eso no afectará la alineación del contenedor que se debe establecer de modo separado agregándole propiedades extras como float o margin.

La propiedad text-align admite ciertas palabras como valores:

center centra el contenido
left alinea el contenido a la izquierda
right alinea el contenido a la derecha
justify alinea el contenido de modo justificado completando las líneas con espacios

Pero ... los nuevos navegadores están agregando algunas opciones extras a esos valores algunos de los cuales 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 y Edge

Parecen lo mismo pero 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 flotaciones que descompaginan las páginas.

Nada es perfecto así que debemos agregar una etiqueta extra:

<div style="text-align:-moz-center;text-align:-webkit-center;text-align:-ms-center;">
	<p style="background-color:#cde;text-align:center;width:300px;">Lorem ipsum dolor sit ...</p>
</div>

En el ejemplo, la propiedad text-align del div establece que su contenido estará a la derecha. Ese contenido es otra etiqueta que, a su vez, centrará su propio contenido que, en este caso, es el texto:

¿Una más? Prometo que es la última.

El CSS3 ha incorporado una nueva propiedad llamada text-align-last que permite definir la forma en que se mostrará la última línea de un texto justificado y los valores posibles son auto, center, left, right y justify.

<p style="text-align:justify;text-align-last:center;">Lorem ipsum dolor sit amet ...</p>