Center align anchor within a `li` element?

Question

So I have a simple list thats set out like below

<ul class='my-videos'>
   <li>
       <a class='show-more' href='' title=''>Show More</a>
   </li>
<ul>

I am trying to get the .show-more to be center aligned. I have got this far

ul.my-videos li .show-more
{
   display:inline-block;
   margin:0 auto;
}

Now this doesn't work. I have setup a JSFiddle here http://jsfiddle.net/6HHKf/

Any ideas on this?

PS I want to keep the anchor as inline or inline-block so that the width isn't 100%

UPDATE There are other elements in the li, so text-align is out of the answer

Answer 1

ul.my-videos li .show-more {
    margin:0 auto;
    border:#aaa 1px solid;
    width: 100px;
    display: block;
}

if you want center an element width margin: 0 auto you need to set the width

and also, you need display:block

check jsfiddle here: http://jsfiddle.net/6HHKf/5/

Answer 2

Simply set the CSS for the list item to center align the text.

.my-videos li { text-align: center; }