在`li`元素内居中对齐锚点? [英] Center align anchor within a `li` element?

问题描述

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

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

我正在尝试使 .show-more 居中对齐.我已经走了

  ul.my-videos li .show-more{显示:行内块；margin:0自动;} 

现在这不起作用.我在这里 http://jsfiddle.net/6HHKf/

设置了JSFiddle

对此有何想法?

PS我想将锚保持为 inline 或 inline-block ，以使宽度不是100％

更新在 li 中还有其他元素，因此 text-align 不在答案之列

解决方案

  ul.my-videos li .show-more {margin:0自动;边框:#aaa 1px实线；宽度:100px；显示:块；} 

如果要居中元素宽度 margin:0 auto ，则需要设置 width

，此外，您还需要 display:block

在此处检查jsfiddle: http://jsfiddle.net/6HHKf/5/

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

解决方案

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/

这篇关于在`li`元素内居中对齐锚点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！