javascript - How to animate a child element with dynamic width content to the center of its parent div, jquery, greensock, css -

i trying animate child span center of parent container regardless of width of span.

below code:

html

<div class="btn btn--large ">     <a href="">         <span>         next case study         </span>     </a> </div> 

css

.btn {     display: inline-block;     text-transform: uppercase;     position: relative;     letter-spacing: 1px;     font-size: 13px;     border: 2px solid #0c315d; }  .btn--large {     padding: 16px 60px 16px 16px;     display: block; }  .btn span {     font-weight: 700;     position: relative; } 

jquery greensock

jquery(document).ready(function($) {     // vars     $btnspan = $('.btn span');      // animate button text     $(".btn a").bind("mouseenter",function(){        $(this).find($btnspan).stop(true, false).animate({left: 50% -$btnspan.width()/1.5, ease: "bounce",}, 600);      }).bind("mouseleave",function(){        $(this).find($btnspan).stop(true, false).animate({left:"0%", ease: "bounce"}, 200);     }); }(jquery)); 

here link jsfiddle created

jsfiddle

you can center calculating parents width , padding:

  var paddingleft = parseint($btnparent.css('paddingleft'));   var moveleft = $btnparent.outerwidth()/2-$btnspan.width()/2-paddingleft;   $(this).find($btnspan).stop(true, false).animate({         left: moveleft, ease: "bounce"}, 600); 

see https://jsfiddle.net/nhnyhv1j/