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

Answer 2

只需将列表项的CSS设置为居中对齐文本。

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

Answer 3

很简单，只需将text-align:center;添加到li。

修改

由于你需要处理li中的其他神秘元素，这可能有效http://jsfiddle.net/6HHKf/6/

Answer 4

如果可以选择在a元素中使用额外的范围，则可以使用left +/- 50%的相对位置