Centering element inside scrollable area
<p>I have long ul element filled with li. Horizontal scroll is enabled so only few <code>&lt;li&gt;</code> are visible at the same time. </p>

<pre><code>&lt;ul id="longScrollableDiv"&gt;
   &lt;li&gt;&lt;a href="centerMe()"&gt;CenterMe&lt;/a&gt;&lt;/li&gt; 
   &lt;li&gt;&lt;a href="centerMe()"&gt;CenterMe&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="centerMe()"&gt;CenterMe&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="centerMe()"&gt;CenterMe&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>I want centerMe() to center selected  in the currently visible area of the div, so the selected a would be if possible in the center of the view.
How can I obtain this? <code>scrollIntoView()</code> doesn't center elements. I'd like no jQuery approach if possible. </p>
