CODEWITHSUNDEEP
csscss-spritestext-alignment
cwiggo
cwiggo

Reputation: 2609

Align text under CSS sprites

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:

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

The related JSFIDDLE can be found HERE

Upvotes: 0

Views: 701

Answers (1)

xpy
xpy

Reputation: 5631

I know that this one will look weird, but...

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

zero height and 70px padding-top

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

Upvotes: 2

Related Questions