02 marzo 2011

Centrar Imágenes en la Columna Lateral de forma Automática

Dibujo de pajaritos

Es muy común que en los blogs coloquemos alguna imagen, y algunos prefieren centrarlas, pero, dependiendo de los los estilos que se hayan definido en la plantilla que estamos usando, es posible que éstas no aparezca al centro, y si es eso lo que queremos y/o pretendemos, (me salió un verso sin esfuerzo) entonces la pregunta es: ¿cómo lograrlo?

Una forma de centrar contenido incluyendo imágenes, es usando una etiqueta llamada center :

<center> contenido...</center>

Pero, esta etiqueta ya es obsoleta, partiendo desde el punto de que, con CSS, es posible definir los estilos de un elemento, sin tener que repetirlos con HTML cada vez que lo necesitemos.

En la plantillas nativas de Blogger no habrá problemas y será muy fácil conseguir nuestro objetivo, ya que la columna lateral está identificada con una clase cuyo nombre es: "sidebar". 

Si es una plantilla de un tercero, probablemente sea distinto, y habrá que averiguarlo para poder definir el CSS.

Pensado que usas una nativa de Blogger, entonces solo harás lo siguiente:

Paso 1. Ve a: Plantilla ►Personalizar ►Avanzado ►Añadir CSS

Opciones del diseñador de plantillas

Paso 2. Escribe en el campo correspondiente el código para centrar las imágenes de la columna, y será algo como esto:

.sidebar img {
display: block;
margin: 0 auto;
}



Paso 3. Si ya tenías imágenes, ahí mismo puedes comprobar los resultados, luego, guarda los cambios en Aplicar al blog.

¿Cómo se lee: "margin: 0 auto;"?

margin: 0 auto; es lo mismo que:

margin-top: 0; /*margen de arriba*/
margin-left: auto; /*margen de la izquierda*/
margin-right: auto; /*margen de la derecha*/
margin-bottom: 0; /*margen de abajo*/



Nota: Cuando el valor es 0,  no  necesita ser acompañado por unidades como pixeles (px), pero, rebasando ese valor (a partir de 1) necesitas poner una unidad.

Aprovechando que andamos con el rollo de los márgenes, y que ésto es importante saberlo cuando andamos personalizando nuestro blog, veamos cómo se interpretan por el navegador los márgenes de un elemento.

Cómo se lee el margen de un elemento.

Es muy importante saber interpretar el margen de un elemento, es básico, recuerdo que la primera vez que vi esos estilos de modo corto, llamado en inglés "shrorthand" pensé: ¿cuál corresponde a cada lado?

Como verás, es muy sencillo, solo basta con que lo aprendas:

Ejemplos.

En este ejemplo, el  valor del margen de arriba y abajo es el mismo y el valor de la izquierda y la derecha son iguales entre si:

.elemento {
margin-top: 10px; /*margen de arriba*/
margin-left: 5px; /*margen de la izquierda*/
margin-right: 5px; /*margen de la derecha*/
margin-bottom: 10px; /*margen de abajo*/
}



Escribiendo nuestro código de modo corto o shorthand , las lineas  anterioriores son lo mismo que:

.elemento {
margin: 10px 5px;
}


En este otro ejemplo,  el valor del margen de la derecha e izquierda son iguales, pero a su vez estos son diferentes a los valores del margen de arriba y abajo, entonces esto se vería así:

.elemento {
margin-top: 12px; /*margen arriba o top*/
margin-right: 15px; /*margen a la derecha*/
margin-left: 15px; /*margen a la izquierda*/
margin-bottom: 8px; /margen al fondo o abajo*/
}


El código anterior, es lo mismo que esto:

.elemento {
margin: 12px 15px 8px; /* margen top 12px, a la derecha e izquierda 15px y del fondo 8 px*/
}


Y si quisiéramos poner un margen en un elemento con el mismo valor para todos los lados, entonces lo haríamos así:


.elemento {
margin: 8px; /* margen de arriba, derecha, izquierda, y fondo es 8px*/
}



Que es lo mismo que:

.elemento {
margin-top: 8px;
margin-left: 8px;
margin-right: 8px;
margin-bottom: 8px;
}



Conclusiones

Como puedes ver, es fácil alinear al centro una imagen de tu columna usando CSS, de ese modo, evitarás utilizar HTML para lograrlo, y tener que escribir el código cada vez que lo necesites.

Referencias:
W3C centrando cosas

Artículos recomendados:

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