CSS: Vinculos con texto e imagenes

En muchas ocaciones he tenido que crear vinculos con imagenes/iconos y texto representativos de la accion que realizan, ej. agregar,modificar, eliminar y cada vez q pongo la imagen en la etiqueta <a> la imagen no queda centrada con el texto.. quizas para muchos es una cuestion muy sencilla, pero para mi que no se mucho o nada de CSS es importante.. aqui va el .css para realizar esto:

a
{
  color: #524F46;
  outline: none;
  text-decoration: none;
}

a:hover
{
  text-decoration: underline;
}

a.salir {
    background: transparent url(../images/imgForm/salir.png) no-repeat scroll left center;
    padding: 2px 0 2px 25px;
}

a.listado {
    background: transparent url(../images/imgForm/list.png) no-repeat scroll left center;
    padding: 2px 0 1px 20px;
}

a.agregar {
    background: transparent url(../images/imgForm/add.png) no-repeat scroll left center;
    padding: 2px 0 1px 20px;
}

a.modificar {
    background: transparent url(../images/imgForm/edit.png) no-repeat scroll left center;
    padding: 2px 0 1px 20px;
}

a.eliminar {
    background: transparent url(../images/imgForm/delete.png) no-repeat scroll left center;
    padding: 2px 0 1px 20px;
}

Y en los vinculos donde se implemtentan la hoja de estilos:

Salir

Volver al listado de personal