A few questions(Bounce, Align)

Question

Im trying to align the text in the circles in the middle and have them bounce when the circle is hovered(the text that is)

Here it is:

http://jsfiddle.net/cJ3se/

Hope someone can help

Denver

Answer 1

The easiest way to vertically centre a single line of text within an element is to match the 'line-height' to the 'height' of the element. So in this case that would be:

.circ {
    line-height: 200px;
}

Then, to have the text bounce, simply alter the 'line-height' via an animation:

.circ:hover {
    animation: bounce .5s ease-in-out infinite;
}
@keyframes bounce {
    50% { line-height: 175px; }
}

Here is a working demo: http://jsfiddle.net/joshnh/Cvjsu/