如何在`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不是答案。

- Sean H Jenkins

---

为什么这个问题有六个踩和一个关闭投票？我没有看出任何问题。是因为“不起作用”这个词触发了自动踩票吗？ - BoltClock

我想知道。有时候SO上有真正的混蛋。问题对我来说似乎很好。实际上，它甚至帮了我一个忙。 - Mauker

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/

- Ya Zhuang

---

非常感谢。运行得很好。 - Sean H Jenkins

Answer 2

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

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

- Scott

---

Mod注意：评论不是为了争论谁对谁错，谁应该被踩。如果一个问题稍微编辑了一下，但是使你的答案无效或过时了，要么修改你的答案，要么完全删除它。如果你觉得问题的编辑完全改变了问题的内容或整体意义（我很确定这个问题没有发生），请留下评论，或在严重情况下回滚。如果你想在这里开始对话，请保持建设性和专业性；不要争吵或称呼名字。 - BoltClock

此外：如果有人编辑或破坏他们的问题，唯一的目的是给所有答案投反对票，那将构成滥用旗帜的行为，但这不是这里的情况。 - BoltClock

Answer 3

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

编辑

由于您需要处理 li 中的其他神秘元素，因此可能会起作用 http://jsfiddle.net/6HHKf/6/

- punkrockbuddyholly

Answer 4

如果在元素内使用额外的是可行的选择，您可以使用相对定位和left +/- 50%。

http://jsfiddle.net/ptriek/6HHKf/8/

- ptriek