如何在响应式设计中使用CSS sprites

I'm hoping there will be a CSS guru out there that can help with this one... I'm building a responsive layout for a site which includes a horizontal navigation bar across the top. This bar contains 5 buttons each of the same width (although obviously this width needs to be flexible). I would like to use icons instead of text for the buttons for when the menu is viewed on a device with a small viewport width. I will use media queries to adapt the layout to use text once I feel the viewport width has reached a suitable size. This is important because I am not anticipating needing to change the size of the icons themselves. I'm happy for them to be of a fixed size, centered in the button and if the button size itself changes then there will simply be more "padding" around the centered icon. Ordinarily I would use have all the icons in one image and use the sprite technique to only display the correct part of the image, but I have come across a problem. If I want the anchor element to fill the parent list element then how can I center the sprite?I'm hoping there will be a CSS guru out there t