Centrar imágenes en la columna lateral, de forma automática, y saber como interpretar el margen

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



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



<center> contenido...</center>



...aunque, 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.



Entonces, como lo que nos interesa centrar son las imágenes en nuestra columna lateral, haremos lo siguiente:



 Vamos a suponer que la columna lateral de nuestra plantilla esta identificada como sidebar, en las nuevas plantillas, y las de Diseño de blogger así esta definido, de otro modo, necesitaremos saber como ha sido nombrada la columna lateral en nuestra plantilla, y ponerlo en lugar de sidebar.



Paso 1. Ve a Diseño ► Diseñador de plantillas ►Avanzado ►Añadir CSS

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

.sidebar img {

display: block;

margin-left: auto;

margin-right: auto;

}

O así, para ahorrarnos algunas lineas:





.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 interpretar 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) es necesario escribir las unidades, lo menciono  por que en varias ocasiones he visto que editando las plantillas, se cambia ese valor por otro y no se le agrega ninguna unidad, tal vez por que como no lo tenía por ser 0 (cero),  se crea que no la necesita al cambiar el valor.



Aprovechando que andamos con el rollo de los márgenes, y que esto es importante saberlo cuando andamos personalizando nuestro blog, vamos a dar una repasada al tema.



Como leer 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 o shrorthand pensé, ¿cuál corresponde a cada lado?, como verán, no es dificil entenderlo, solo basta con saberlo y aprenderlo:



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 quicieramos poner un margen en un elemento con el mismo valor para todos los lados, entonces lo hariamos asi:



.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

w3schools margin