Align text under CSS sprites

[skeptical]

I have a number of links, each have a class passing the correct sprite to present each image and the relative hover image for each link.The problem is aligning the text directly underneath the sprite.Can anyone help me to find a solution?My problem specific code:\[code\].image_row td a{ background-image:url('http://www.thechefsdirectory.com/images/navigation/VIEW_WEB.png'); background-repeat:no-repeat; display: block; height: 70px; width: 70px;}.image_row td a.item1 {background-position:0px 0px;}.image_row td a:hover.item1 {background-position:0px -70px;}.image_row td a.item2 {background-position:-70px 0px;}.image_row td a:hover.item2 {background-position:-70px -70px;}.image_row td a.item3 {background-position:-140px 0px;}.image_row td a:hover.item3 {background-position:-140px -70px;}.image_row td a.item4 {background-position:-210px 0px;}.image_row td a:hover.item4 {background-position:-210px -70px;}.image_row td a.item5 {background-position:-280px 0px;}.image_row td a:hover.item5 {background-position:-280px -70px;}.image_row td a.item6 {background-position:-350px 0px;}.image_row td a:hover.item6 {background-position:-350px -70px;}.image_row td a.item7 {background-position:-420px 0px;}.image_row td a:hover.item7 {background-position:-420px -70px;}.image_row td a.item8 {background-position:-490px 0px;}.image_row td a:hover.item8 {background-position:-490px -70px;}\[/code\]The related JSFIDDLE can be found HERE