中心对齐`li`元素内的锚点？

Question

所以我有一个简单的列表,如下所示

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

我试图让.show-more中心对齐.我到目前为止

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

现在这不起作用.我在这里设置了一个JSFiddle http://jsfiddle.net/6HHKf/

有什么想法吗？

PS我想保持锚定为inline或者inline-block宽度不是100%

更新中 还有其他元素li,因此text-align没有答案

Answer 1

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

如果你想要中心元素宽度margin: 0 auto你需要设置width

而且,你需要 display:block

检查jsfiddle:http: //jsfiddle.net/6HHKf/5/