CSS3 text-align: cómo centrar y justificar textos

La propiedad Text-align forma parte del lenguaje CSS3 y se encarga de alinear el texto, justificándolo o centrándolo. Ya existía en anteriores versiones del lenguaje de estilos CSS así que no es ninguna novedad de CSS3, sino parte de las cosas que ya eran correctas y que hereda. En nuestro artículo lo único que vamos a realizar es un breve resumen de los valores que puede tener y dar algunas indicaciones de como usarla en un blog de Blogger.


Text-align es una propiedad de CSS3 que sólo afecta al texto escrito y que tiene 5 valores posibles: left, right, justify, center y inherit.

• Text-align:left  hace que el texto se alinee a la izquierda y el borde derecho es irregular.
• Text-align:right es justo lo contrario, el texto se alinea al lado derecho.
• Text-align:justify hace que el texto se alinee a ambos lados, y que los espacios entre palabras se amplíen para que quede todo en el sitio. Es el justificado que habitualmente se ve en las columnas de los medios de prensa.
• Text-align:center centra el texto, dejando el mismo espacio a la derecha que a la izquierda.
• Text-align:inherit recoge este valor del elemento padre.  

Valor por defecto. No existe un valor none, por ello aunque no se escriba la propiedad en el código CSS el texto debe estar alineado de alguna forma. El valor por defecto si nuestro blog o Web tiene la escritura normal de izquierda a derecha, el alineado a la izquierda (text-align:left) . Si fuera al revés, como por ejemplo una página Web escrita en árabe, con escritura de derecha a izquierda, entonces por defecto el texto se alinea a la derecha.

Ejemplos.

Texto alineado a la derecha.

Texto alineado a la izquierda (normal).

Texto centrado.

Aplicaciones en Blogger.

Esta propiedad de CSS3 la podemos usar para ajustar como queremos que aparezcan los textos de la plantilla. Si la plantilla no dice lo contrario, por defecto tendremos todo justificado a la izquierda, incluyendo los título. Así que modificando estos valores en las plantillas y en los gadgets puedes hacer que cambie bastante el look del blog de Blogger.

1. Centrar el título del blog y otros elementos. Lo único que tenemos que hacer es añadir la propiedad text-align: center. Para ello lo que debes hacer es enterarte de cual es el selector para el CSS3. Tienes un buen ejemplo de como hacer esto en Blogger en el artículo de Karla en Compartidíssimo, aunque hay muchos más selectores que podemos usar.
2. Justificar el texto de un gadget, o darle otro alineamiento que no sea a la izquierda. Esta propiedad de CSS también se puede aplicar directamente en el código HTML, tal y como está explicado en este post. Esto es útil si por ejemplo sólo queremos tocar un único gadget y que los demás mantengan su alineamiento normal.
3. Cambiar la alineación de todos los textos de tu blog. La ventaja del CSS es que te permite hacer cambios globales de todas las secciones con una simple línea de código. Imaginamos un blog en el que ya tenemos los títulos centrados y hemos escrito 700 artículos, y de repente queremos que todos los artículos y también el texto de los gadgets esté justificado a ambos lados. Para ello sólo es necesario añadir este código al principio del código CSS.

body {text-align:justify;}

Este "truco" hará de golpe todos los textos de tu blog queden justificados a ambos lados, excepto aquellos textos en los que les hayas dado de forma explicita otro valor a la propiedad text-align. En otras palabras, si el título del blog de Blogger está centrado, quedará centrado, y si la fecha de publicación de un artículo has dicho que tiene que quedar a la derecha no se moverá del sitio. El texto sólo afectará a aquellos textos que por defecto se alineaban a la izquierda. Y lo bueno es que es fácilmente reversible, cambiando una única línea de CSS todos pueden centrarse o volverán a estar alineados a la izquierda. Esto es bastante práctico para que de forma automática ajuste los textos sin que tengas que justificar los textos desde el editor.