Blogroll con avatar

Me han preguntado la forma de añadir un grupo de imágenes tipo avatar de manera que todas las imágenes queden centradas y de igual tamaño.
Supuestamente es algo parecido a un blogroll y por lógica irá añadido a la sidebar. Esto quiere decir que lo agregaremos como un elemento de página incluyendo el código en HTML/Javascript.
El efecto quedaría más o menos así, pudiendo modificar colores y tamaño.

El código:

<div align="center"> <div style="padding: 10px; width: 180px; text-align: center;"><div style="border: 1px solid black; padding: 5px; width: 180px; text-align: center; background-color: rgb(245, 245, 245); font-size: 10px;"><div style="border: 1px solid silver;">
<img src="url-imagen" alt="Gem@ " title="Gem@ " border="0" height="32" width="32"/><a href="url-blog"><img src="url-imagen" alt="Gem@ " title="Gem@ " border="0" height="32" width="32"/><a href="url-blog"><img src="url-imagen" alt="Gem@ " title="Gem@ " border="0" height="32" width="32"/><a href="url-blog"><img src="url-imagen" alt="Gem@ " title="Gem@ " border="0" height="32" width="32"/><a href="url-blog"></div></div>
</DIV></div>

Modificaciones:

El tamaño es muy importante, nunca debe ser superior a nuestra sidebar de lo contrario quedaría desplazada hacia abajo. Donde width: 180px; lo sustituiremos por la medida de nuestra sidebar, en la plantilla Minima por ejemplo lo localizaremos en #sidebar-wrapper {

Donde border: 1px es el grosor del borde a mayor valor mayor grosor del borde.
solid es el tipo de borde aquí encontraréis algo más.También podemos sustituir el color del borde en black y silver.

En background-color: rgb(245, 245, 245); escogemos color de fondo, en font-size: 10px; tamaño de letra.

Sustituiremos Gem@ en alt="Gem@ " title="Gem@" para añadir el nombre que visionaremos al pasar el ratón sobre el avatar.

El tamaño del avatar lo modificamos en width="32" height="32"

Y por último "url-imagen" y "url-blog" para añadir la url del avatar y la url de la página enlazada.



!Suerte'