对齐CSS sprites下的文本

我有许多链接，每个链接都有一个类传递正确的精灵来呈现每个图像以及每个链接的相对悬停图像。对齐CSS sprites下的文本

问题在于对齐精灵正下方的文本。

任何人都可以帮助我找到解决方案吗？

我的问题的具体代码：

.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

来源

2013-03-31 cwiggo

我知道，这样一个看起来怪异，但...

.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/

来源

2013-03-31 01:34:27 xpy

谢谢你，但你知道它为什么这样工作的原因？ – cwiggo

@Chris“padding”被添加到宽度/高度，因此您现在实际上拥有一个70x70px的框，但没有内容空间，因此内容会被推到块的边界之外，但仍然可见，因为默认'overflow'的值是'visible'，如果你设置为'hidden'，它会消失。 – xpy

是啊，谢谢你的解释！ – cwiggo

对齐CSS sprites下的文本

回答

相关问题