7

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

2
  • 2
    Why does this have six downvotes and a close vote? I don't see anything wrong with it. Does the phrase "doesn't work" trigger automatic downvotes or something?
    – BoltClock
    Dec 30, 2011 at 18:17
  • I wonder. Sometimes SO have real douchebags. The questions seems just fine to me. Actually, it even helped me.
    – Mauker
    Aug 12, 2015 at 18:54

4 Answers 4

9
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/

1
  • Thanks very much. Works a treat Dec 30, 2011 at 13:32
4

Simply set the CSS for the list item to center align the text.

.my-videos li { text-align: center; }
2
  • Mod note: comments are not for bickering over who's right, who's wrong and who deserves to be downvoted. If a question was slightly edited but to the point of invalidating or obsoleting your answer, either edit your answer along or remove it altogether. If you feel the question edit completely and utterly changes the content or overall meaning of the question (which I'm pretty sure didn't happen to this question), leave a comment, or in serious cases roll it back. If you want to start conversations here, keep them constructive and professional; don't bicker or name-call.
    – BoltClock
    Dec 31, 2011 at 0:57
  • Also: if somebody is editing or vandalizing their question with the sole intent of downvoting all the answers, that would constitute abuse worthy of a flag, but that isn't the case here.
    – BoltClock
    Dec 31, 2011 at 1:10
0

Easy, just add text-align:center; to the li.

Edit

Since you need to cope with other mystery elements in the li this may work http://jsfiddle.net/6HHKf/6/

0

If it's an option to use an extra span within the a element, you could use relative positioning with left +/- 50%

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.