01 febrero 2011

Alinear el Título de tu Blog y otros Textos con CSS

Texto con diferentes tipos de alineación
¿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 ésto 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 la herramienta de "alineación",  y puedes alinear dichos textos 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 cómo lograrlo.

Pero, no es algo que nos va a complicar mucho la existencia, ya que éso lo podemos conseguir fácilmente, si usamos una propiedad de CSS llamada text-align.

Dicha propiedad  permite alinear el contenido que está dentro de un bloque, como por ejemplo, el contenido de las citas o blockquotes, entre otros, 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, ya que en las nuevas plantillas el título del blog y los títulos de la columna(s) lateral(es)  se muestran de forma predeterminada a la izquierda.


¿Cómo aplicarla en mi blog?


Ejemplos más comunes:

1) Para alinear el título del blog

Si por ejemplo quiero mover a la derecha el título del blog, que generalmente se muestra a 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;
}



2) Centrar el título de la columna lateral
Para lograrlo, si es que usas las plantillas nativas de Blogger, lo harías usando este CSS:

.sidebar h2 {
text-align:center;
}


Como ya te había comentado antes, ésto lo puedes hacer sin ingresar a "Editar HTML", 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. Solo basta con saber la propiedad que lo permite y conocer sus valores posibles.

Se puede aplicar de manera simple usando la nueva característica que usa el nuevo diseñador de plantillas de Añadir CSS, y poner 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
Propiedad text-align

Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.