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/

在CSS sprites下对齐文本

1 个答案: