Centrer image dans une menu horizontal en ul.

Bonjour/Bonsoir à tous.

Voilà mon problème, j'ai un menu horizontal organisé avec une liste, et je voudrais centrer les images, au même titre que le texte.

Voila le site : http://arthur.andre69.free.fr/


xHTML :

<ul id="menu">
		<li><img src="home.png" alt="" /><br />&nbsp;<a href="index.html">Accueil</a>&nbsp;&nbsp;&nbsp;</li>
		<li><img src="setup.png" alt="" /><br /><a href="logiciels.html">Logiciels</a>&nbsp;&nbsp;&nbsp;</li>
		<li><img src="computer.png" alt="" /><br /><a href="materiels.html">Matériels</a>&nbsp;&nbsp;&nbsp;</li>
		<li><img src="google.png" alt="" /><br /><a href="webdesign.html">Webdesign</a>&nbsp;&nbsp;&nbsp;</li>
		<li><img src="photo.png" alt="" /><br /><a href="photo/index.html">Arthur Photo</a></li>
	</ul>

CSS :

* { margin: auto; padding: 0; }
.menu {
	background: url(bg4.png) no-repeat top center;
	position: relative;
	padding: 0;
	margin: 0;
	height: 90px;
	width: 900px;
	font-family: Calibri, Verdana, Arial;
	font-size: 1.1em;
	color: #ffffff;
	text-align: center; }
.menu ul { list-style: none; z-index: 10; z-index: 100; padding: 8px 5px; text-align: center; }
.menu li { float: left; padding: auto; margin-left: auto; margin-right: auto; text-align: center;}
.menu li img{ margin-left: auto; margin-right: auto; display: inline; text-align: center; }
.menu a, .menu a:link, .menu a:active, .menu a:visited { text-decoration: none; color: #ffffff; padding: 10px; }
.menu a:hover { color: #0070f0; text-decoration: none; }

Ce menu étant une copie d'un autre, certaines choses ne vont surement pas, mais je suis une bouse en css...

Merci d'avance de votre aide !!

Essaye ça !

* { margin: auto; padding: 0; }
#menu {
	background: url(bg4.png) no-repeat top center;
	position: relative;
	padding: 0;
	margin: 0;
	height: 90px;
	width: 900px;
	font-family: Calibri, Verdana, Arial;
	font-size: 1.1em;
	color: #ffffff;
	text-align: center; }
#menu ul {padding: 8px 5px; text-align: center; }
#menu li { list-style:none; float:left; display:block; padding:0 5px;text-align: center;}
#menu li img{ text-align: center; }
#menu a { text-decoration: none; color: #ffffff;}
#menu a:hover { color: #0070f0; text-decoration: none; }

<ul id="menu">
		<li><img src="home.png" alt="" /><br /><a href="index.html">Accueil</a></li>
		<li><img src="setup.png" alt="" /><br /><a href="logiciels.html">Logiciels</a></li>
		<li><img src="computer.png" alt="" /><br /><a href="materiels.html">Matériels</a></li>
		<li><img src="google.png" alt="" /><br /><a href="webdesign.html">Webdesign</a></li>
		<li><img src="photo.png" alt="" /><br /><a href="photo/index.html">Arthur Photo</a></li>
	</ul>

Parfait ça marches^^

Étant donné que j'ai copié ce code d'ailleurs, j'avais pas cherché à comprendre comment ça marches...


Bon Dimanche à tous !