Выровнять текст под CSS sprites

Question

У меня есть ряд ссылок, у каждого из которых есть класс, передающий правильный спрайт, чтобы представить каждое изображение и относительное изображение наведения для каждой ссылки.

Проблема заключается в выравнивании текста непосредственно под спрайтом.

Может ли кто-нибудь помочь мне найти решение?

Моя проблема конкретный код:

.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;} 

Родственный JSFIDDLE можно найти HERE

Answer 1

Я знаю, что это один будет выглядеть странно, но ...

.image_row td a{ 
    background-image:url('http://www.thechefsdirectory.com/images/navigation/VIEW_WEB.png'); 
    background-repeat:no-repeat; 
    display: block; 
    height: 0px; 
    padding: 70px 0 0 0; 
    text-align:center; 
    width: 70px; 
} 

нулевой height и 70px padding-top

DEMO: http://jsfiddle.net/pavloschris/53uLN/1/