[Résolu] Centrage horizontal, d'un menu horizontal

Salut à tous, donc voilà je suis en train de faire un ptit site pour m'entrainer et partagé quelque fotos; je le fait en html 5/css3 .

Le probleme, je n'arrive pas bien à centrer mon menu principal (horizontal)

adresse du site : http://repear.x10.mx

le code du menu (que j'intègre dans chacune des pages via du php) :

<div id="menu">
<nav role="navigation">
				<ul> 
                   <li id="ac"><a href="index.php"><img src="image/icons/home2.png" alt="accueil" title=""
					 <?php 
					 if ($page == "acceuil")
					 {
						 echo "class=active";
					 } 
					 ?>
                     > <br> Accueil</a></li>
                     
                     <li id="ph"><a href="photo.php"><img src="image/icons/pic.png" alt="photo" title=""
                     <?php 
					 if ($page == "photo")
					 {
						 echo "class=active";
					 } 
					 ?>
                     > <br> Photos</a></li> 
                     
                     <li id="vi"><a href="video.php"><img src="image/icons/vid.png" alt="vidéo" title=""
                     <?php 
					 if ($page == "video")
					 {
						 echo "class=active";
					 } 
					 ?>
                     > <br> Vid&eacute;os</a></li> 
                     
                     <li id="mu"><a href="music.php"><img src="image//icons/ecasque.png" alt="music" title=""
                     <?php 
					 if ($page == "music")
					 {
						 echo "class=active";
					 } 
					 ?>
                     > <br> Musiques</a></li> 
                     
                     <li id="au"><a href="autre.php"><img src="image/icons/burn.png" alt="autre" title=""
                     <?php 
					 if ($page == "autre")
					 {
						 echo "class=active";
					 } 
					 ?>
                     > <br> Autres</a></li> 
                     
                     <li><a href="contact.php"><img src="image/icons/mail.png" alt="contact" title=""> <br> Contact</a></li>
                 </ul>
                 </nav>
              </div>

/*!!!!!!!!!Menu!!!!!!!!!!!!!!!!*/

[role=navigation] {
	width:80%;
	margin:auto;
}

[role=navigation] ul {
	background-color: rgba(255,255,255,0.2);
	list-style-type:none;
	width: 75%;
	height: 90px;
	border-radius: 15px;
	border-style: ridge;
}
[role=navigation] li {
	text-align:center;  
    list-style-type: none;  
    float:left; 
    width:16%;
}
[role=navigation] img {
	vertical-align: middle;
	-webkit-transition: all 1.25s;
	-moz-transition: all 1.25s;
	-o-transition: all 1.25s;
	transition: all 1.25s;
	transition-timing-function: ease-in-out;
}
[role=navigation] a {
	color: #0F0;
	text-decoration: none;
	font-size:x-large;
	vertical-align: middle;
	-moz-transition-property: color;
	-webkit-transition-property: color;
	-o-transition-property: color;
	transition-property: color;
	-moz-transition-duration: 1s;
	-webkit-transition-duration: 1s;
	-o-transition-duration: 1s;
	transition-duration: 1s;
	display:inline-block;
	width:100%;
}
[role=navigation] a:hover, [role=navigation] a:focus {
	color:#0C9;
}

[role=navigation] li:hover img {
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
} 
#menu		{
}
#menu li a.active{
	color:#F60
}

Merci d'avance
Modifié par Repear (08 Jul 2011 - 11:47)

Bonjour,

Pour centrer le menu, ajoute la propriété suivante à la balise <ul> :

#menu ul{
  margin:0 auto;
}

Et bien merci beaucoup, je sais pas comment j'ais fait pour raté sa (sa fesai trop longtemp que je me prenais la tête je crois)

MERCI