title: Center align anchor within a `li` element?
body: <p>So I have a simple list thats set out like below</p>
  
  <pre><code>&lt;ul class='my-videos'&gt;
     &lt;li&gt;
         &lt;a class='show-more' href='' title=''&gt;Show More&lt;/a&gt;
     &lt;/li&gt;
  &lt;ul&gt;
  </code></pre>
  
  <p>I am trying to get the <code>.show-more</code> to be center aligned. I have got this far</p>
  
  <pre><code>ul.my-videos li .show-more
  {
     display:inline-block;
     margin:0 auto;
  }
  </code></pre>
  
  <p>Now this doesn't work. I have setup a JSFiddle here <a href="http://jsfiddle.net/6HHKf/" rel="noreferrer">http://jsfiddle.net/6HHKf/</a></p>
  
  <p>Any ideas on this?</p>
  
  <p>PS I want to keep the anchor as <code>inline</code> or <code>inline-block</code> so that the width isn't 100%</p>
  
  <p><strong>UPDATE</strong>
  There are other elements in the <code>li</code>, so <code>text-align</code> is out of the answer</p>