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.

#quickmenu { width:600px; margin-left:auto; margin-right:auto; } #quickmenu ul{ margin:0; padding:0; } #quickmenu ul li{ display:inline; border-left:solid 1px #CCCCCC; border-bottom:solid 1px #CCCCCC; float:left; text-align:center; } #quickmenu ul li.firstelement{ border:0; border-bottom:solid 1px#CCCCCC; } #quickmenu a{ display:block; background-repeat:no-repeat; background-position:top; padding:40px 10px 0px 10px; } #inicioico{background-image:url('/sites/default/files/1/ico1.gif');} #ico1{background-image:url('/sites/default/files/1/ico2.gif');} #ico2{background-image:url('/sites/default/files/1/ico1.gif');} #ico3{background-image:url('/sites/default/files/1/ico2.gif');} #ico4{background-image:url('/sites/default/files/1/ico1.gif');} #ico5{background-image:url('/sites/default/files/1/ico2.gif');}

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.

Tags: