Выровнять по центру привязку внутри элемента `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%

UPDATE В 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/

Answer 2

Просто установите CSS для элемента списка, чтобы выровнять текст по центру.

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

Answer 3

Если есть возможность использовать дополнительный интервал внутри элемента a, вы можете использовать относительное позиционирование с left +/- 50%

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

Answer 4

Легко, просто добавьте text-align:center; к li.

Редактировать

Так как вам нужно справиться с другими загадочными элементами в li, это может сработать http://jsfiddle.net/6HHKf/6/