title: Center an element in middle on screen for an horizontal scroll list
body: <p>I'm attempting to have the element clicked being positioned automatically at the center of the screen. The list is having a horizontal scroll with some <code>overflow-x : scroll</code> which is hiding what's outside of the div(screen). 
  I can't find out what coordinates to pass to <code>scrollLeft()</code>. </p>
  
  <pre><code>$('#timepicker li').on('click',function(){
  
      var maxScrollLeft= $("#timepicker").scrollLeft('#timepicker').prop('scrollWidth') - $("#timepicker").width();
  
  
  $('#timepicker').animate({
       scrollLeft: 
  });
  });
  </code></pre>
  
  <p>Please see my codepen: <a href="http://codepen.io/nicc/pen/pJXREz" rel="nofollow">codepen</a></p>
  
  <p>thank you.</p>