css inline list needs width, height and vertical-alignment, for background-image swap on hover, using sprite

I have placed the corresponding code at http://cssdesk.com/QSwDG

The sprite (referenced as 'circle.png' in the code) is at: http://i54.tinypic.com/34jas79.png

Objectives: - To get the list items inline while maintaining the 60x60 size of each. - To have the lower part of the sprite apear when each link is hovered over: A circle should appear around the link. - To vertically centre the text with开发者_高级运维in each 60 x 60 container.

I know I can create separate images for each of the links and achieve the desired visual outcome but I want to see if the above is possible.

Thanks

@caseyc

For horizontally and vertical centralization, try it:

li{
  float:left;
  width:60px;
  height:60px;
  border:1px dotted green;
  display:block;
  text-decoration:none;
  display:table;
}

a.roll{
  vertical-align:middle;
  display:table-cell;
  text-align:center
}

Now, make the background property on "a.roll".

Cleber.

well... if you don't have to support IE < 8 then you can use display:table-cell;. I'm not entirely versed in display:table so I just floated the lis.

http://cssdesk.com/3hKth

a.roll{
    ...
    vertical-align: middle;
    display: table-cell;
}