Comment utiliser les sprites CSS à l'intérieur d'un responsive design

Je l'espère, il y aura un gourou CSS là-bas qui peut vous aider avec celui-ci...
Je suis en train de construire un réactif de mise en page pour un site qui comprend une barre de navigation horizontale en haut. Cette barre contient 5 boutons de chacun de la même largeur (bien que, évidemment, cette largeur doit être souple). Je voudrais utiliser les icônes au lieu de texte pour les boutons lorsque le menu est affiché sur un appareil avec une petite largeur de la fenêtre d'affichage. Je vais utiliser les media queries pour adapter la mise en page à utiliser le texte une fois que je ressens de la fenêtre d'affichage de la largeur a atteint une taille appropriée. Ceci est important parce que je ne suis pas d'anticiper avoir besoin de changer la taille des icônes elles-mêmes. Je suis content pour eux d'être d'une taille fixe, centré sur le bouton et si la taille du bouton lui-même des changements, alors il y aura tout simplement plus de "rembourrage" autour de l'centrée sur l'icône.
Normalement, je voudrais utiliser ont toutes les icônes dans une image et utiliser le sprite technique pour afficher uniquement la partie correcte de l'image, mais j'ai rencontré un problème. Si je veux le point d'ancrage de l'élément de remplir le parent d'un élément de liste alors comment puis-je centre le sprite?

Voici quelques exemple de balisage:
D'abord le html (extrait)

 <nav>
   <ul class="top_nav">
    <li><a class="link_1" href="#">link 1</a></li>
    <li><a class="link_2" href="#">link 2</a></li>
    <li><a class="link_3" href="#">link 3</a></li>
    <li><a class="link_4" href="#">link 4</a></li>
    <li><a class="link_5" href="#">link 5</a></li>
   </ul>
 </nav>

Et je pourrais style comme ceci:

 nav ul {
          width: 100%;
          overflow: auto;
        }

 nav li {
          float: left;
          width: 20%;
          background: #2c2c2c; /* dark background for light icons */
        }

 nav li a {
            display: block;
            border: 1px solid #e7e7e7;
            background-image: url(path/to/sprite.png);
            background-repeat: no-repeat;
            text-indent: -15000px;
            width: 48px;
            height: 48px;
            margin: 0 auto;
          }

 nav li a.link_1 {
                   background-position: 0 0;
                 }

 nav li a.link_2 {
                   background-position: 0 -49px;
                 }

etc....

Mais cela ne fera que me donner une zone cliquable de 48 px x 48 px au sein d'un bouton qui permet de changer la largeur selon la taille de l'élément parent. Si je fais le point d'ancrage de l'élément de remplissage il est parent d'un élément de liste, puis l'icône ne peut pas être centré à l'aide de la marge de la règle.
Je pourrais ajouter un autre élément à l'intérieur de l'élément d'ancrage qui était vide, mais avait l'icône de l'arrière-plan comme ceci:

 <li><a href="#"><div class="link_1">Link 1</div></a></li>

Et de style avec:

 nav li a {
            display: block;
            border: 1px solid #e7e7e7;
            width: 100%;
          }

 nav li a div {
                background-image: url(path/to/sprite.png);
                background-repeat: no-repeat;
                text-indent: -15000px;
                width: 48px;
                height: 48px;
                margin: 0 auto;
              }

 nav li a div.link_1 {
                   background-position: 0 0;
                 }

Mais ce n'est pas un très sémantique ou solution élégante. Quelqu'un peut-il penser à quelque chose de mieux??