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 li
s.
http://cssdesk.com/3hKth
a.roll{
...
vertical-align: middle;
display: table-cell;
}
精彩评论