Alinear el título de tu blog y otros textos con CSS

¿A la derecha, a la izquierda, en el centro?, seguramente y por lo menos una vez, habrás tenido la idea de alinear un texto, como por ejemplo el título de tu blog, o los títulos de la columna lateral, es muy común que esto pase cuando empezamos a personalizar un poquito nuestro blog.



En el panel de edición de entradas de blogger y otros editores como Windows Live Writer, no tendremos ningún problema para alinear textos, (me refiero a los párrafos de tus entradas) ya que dichos editores cuentan con esa herramienta y puedes alinear lo que escribes con un solo click.



La cosa se complica, aunque no mucho, cuando queremos alinear por ejemplo el título de la cabecera y no sabemos como lograrlo, pero, no es algo que nos va a complicar mucho la existencia, ya que eso lo podemos conseguir fácilmente, si usamos una propiedad de CSS llamada text-align.



Esa propiedad  permite alinear el contenido que está dentro de un bloque, como por ejemplo, el contenido de las citas o blockquotes, el de las etiquetas h1, h2, etc, y funciona perfectamente en navegadores como Internet Explorer, Firefox, Google Chrome, Safari y Opera.



¿Qué valores puede tener text-align?



La propiedad text-align, puede tener los siguiente valores

right	alinea el texto a la derecha
left	alinea el texto a la izquierda
center	centra el texto
justify	justifica el texto en ambos márgenes (izq., dcha.) para que el texto abarque el ancho del bloque contenedor
inherit	hereda la alineación del elemento padre (el que lo contiene)

Todos estos valores trabajan en función a los márgenes del contenedor en el que se encuentren, eso quiere decir que se alinearán tomando en cuenta el valor de los márgenes que tenga el bloque contenedor del texto.



Los valores que más nos interesan, o los que pueden ser más útiles en nuestros blogs son right, center y justify, ya que en las nuevas plantillas el título del blog y los títulos de la columna(s) lateral(es)  se muestran a la izquierda.



¿Cómo aplicarla en mi blog?



Ejemplos más comunes



Para alinear el título del blog

Si por ejemplo quiero mover a la derecha el título del blog , que generalmente se muestra hacia la izquierda en las nuevas plantillas, usaremos este código...

.header h1{

text-align: right;

}

...y si lo queremos centrar

.header h1 {

text-align: center;

}

Para alinear el texto de los blockquotes o citas

También, si queremos justificar cualquier párrafo, por ejemplo el de los blockquotes o citas ...

.post blockquote {

text-align: justify;

}

El título de la columna lateral

...vamos a imaginar que lo queremos centrar, y usando como ejemplo las nuevas plantillas lo podemos hacer así:

.sidebar h2 {

text-align: center;

}

Como ya te había comentado antes, esto lo pueden hacer sin ingresar a la edición HTML de tu plantilla, sólo necesitarás agregarlo en Añadir CSS, que dispone el nuevo diseñador de plantillas y aplicarlo al blog.



Conclusiones

Como puedes ver, es muy fácil alinear contenidos como textos que están dentro de un bloque, basta con saber la propiedad y sus valores.



Se puede aplicar de manera simple usando la nueva característica que usa el nuevo diseñador de plantillas de Añadir CSS, y escribir ahí el código CSS personalizado, por lo que es más sencillo obtener la presentación que deseas para tu blog con CSS.



Referencias: w3schools