Centrar imágen y texto en elemento lista

Estoy haciendo un menú en el cual le debo incluir a cada elemento un ícono diferente al comienzo, como se muestra en esta imágen


Hice el menú general con listas, puse el fondo verde como background para todas y hasta ahí todo relativamente bien, pero lo que no se, es cómo hacer para que la imágen también quede centrada y a la vez sea diferente para cada ítem del menú, ya que si fuera una sóla para todos no habría problema.

¿alguién tiene una idea de cómo puedo hacerlo?, agradezco la ayuda de antemano.

está difícil sin código ni url, pero si al link le estás poniendo una clase para determinar el bg que vendría siendo el icono podrías utilizarlo de la siguiente manera:

Código :

a.elemento1{
  background: transparent url("fondo.png") no-repeat center left;
}

suerte

Sí tienes razón fael, sin url y código es difícil . Bueno aquí está la url: http://zarzamora.la100rra.com.mx/id21test/index.html
y el código que uso

CSS

Código :

#navigation {
   list-style:none;
}
#navigation li {
   margin: 2px 0 1px 0;
   padding: 5px 0 0 0;
}
#navigation li a {
   background: #445A25 url(../images/bck_menu_left.jpg);
   font: bold 10px;
   color:#FFFFFF;
   text-decoration:none;
   line-height: 20px;
   width:100%;
   height: 20px;
   margin: 2px 0 0 0;
   padding: 1px 0 5x 0;
   display:block;
}
#navigation li a:hover {
   background: #fff;
   color:#ECC231;
}

HTML:

Código :

<ul id="navigation"> 
         <li><a href="index.html"><img src="images/ico_home.gif" alt="Home" width="23" height="22" border="0" />Home</a></li>
         <li><a href="index.html">Casino College Advantage </a></li>
         <li><a href="#">Locations</a></li>
         <li><a href="capitulos.html">Capitulos</a></li>
         <li><a href="galeria.html">Galer&iacute;a</a></li>
         <li><a href="descargas.html">Descargas</a></li>
         <li><a href="contacto.html">Contacto</a></li>
</ul>

como es una imagen para cada item podes crear un id por cada item que nesecita imagen:

Código :

#menu-home{
   background-image:url(imagenes/01.png);
}
#menu-location{
   background-image:url(imagenes/03.png);
}

Código :

<ul id="navigation"> 
         <li id="menu-home"><a href="index.html">Home</a></li>
         <li id="menu-location"><a href="index.html">Casino College Advantage </a></li>
</ul>

y en la lista solo le agregas espacio al texto usando indent:

Código :

#navigation li a {
indent:20px;
}

creo que es algo parecido a lo que apunto fael, que me corrija si hay algo indebido.

Gracias a los dos.. ya se me aclaró un poquito más la mente después lo implementaré y les contaré a ver cómo me fue...