Search code examples
jquerycsscentervertical-alignmentbounce

A few questions(Bounce, Align)

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

Solution

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