Centrer liste à puce

la liste à puce : 
<ul id="sous_menu"> 
  <li> <a href="WebOS">WebOS</a> </li> 
  <li> <a href="Gestionnaire-Fichiers">Gestionnaire 
De 
Fichiers</a> </li> 
  <li> <a href="Logitheque">Logithèque</a> 
  </li> 
  <li> <a href="Videotheque">Videothèque</a> 
  </li> 
  <li> <a href="Wunttu-Rapport">Rapport 
Fonctionnement</a> </li> 
</ul> 

le css : 
<style> 
#sous_menu{ 
text-align:center; list-style-type:none; /* on enlève la puce */ margin: 0; /* on retire les marges intérieures et extérieures */ 
padding:0; width: 20%; /* J'ai mis une largeur pour ne pas prendre toute la largeur de l'écran */ 
border : solid 1px #a3c0d5; /* on applique des bordures à la balise ul */ 
border-bottom: none; /* et on retire celle du bas */ 
} 
#sous_menu li{ 
text-align:center; margin: 0; /* on retire les marges intérieures et extérieures */ 
padding: 0; border-bottom: 2px solid #a3c0d5; /* ici on affiche une bordure uniquement en bas */ 
} 
#sous_menu a{ 
text-align:center; text-decoration:none; /* on enlève le soulignement */ 
color:#5d90b5; display:block; /* C'est ici qu'il faut bien comprendre (j'explique plus bas) */ 
padding-left:1.5em; /* une marge intérieure gauche juste pour l'esthétique */ 
} 
#sous_menu a:hover{ 
text-align:center; background-color:#e9eefb; color:#294f79; } 
  </style>