Menu con lista horizontal con imágenes y texto centrado
Después de buscar en la red algun "Snippet" de código de cómo crear un menu de iconos con listas, horizontal y además con texto centrado en CSS y no encontrar nada, he tenido que ponerme manos a la obra y crearlo. Es fácil de ver este tipo de menu rápido en las webs maquetado con las ya olvidadas tablas , pero no tanto con CSS y XHTML. He probado varios métodos, unos más simples que otros pero todos ellos mostraba diferencias visuales entre navegadores como IE7 y FireFox 2.0.0.9. Lo más difícil ha sido centrar la imagen y el texto, pero con una buena combinación de las propiedades "float" y "display" he conseguido lo que quería. Además este código permite que el espacio de cada icono se autoextienda cuando escribimos un texto largo. Por cierto, en el código he centrado la lista y además he introducido un borde en la parte inferior e izquierda para que se vea mejor el centrado de los iconos y texto.
El código fuente del CSS es simple y puede quedar más simple quitanto los bordes y el centrado general.
Aquí tenemos el código HTML. Como veis queda un código simple y limpio, ya que por ejemplo, no introduzco las imágenes con la etiqueta "IMG". Además, utilizando esta etiqueta no se centraba bien el texto y la imagen.