How to get my <li> in the center of my navigator

Question

.ul_center{ margin: 0 auto; } .li_center{ list-style: none; padding: 5px; background-color: yellow; display: inline-block; } 

 <nav> <ul class="ul_center"> <li class="li_center">testing1</li> <li class="li_center">testing2</li> <li class="li_center">testin3</li> <li class="li_center">testing4</li> <li class="li_center">testing5</li> </ul> </nav> 

How do I set my <li> to my screen. I thought it would work with margin: 0 auto; but does not work.

Answer 1

Add this code:

 .ul_center{ text-align: center; } 

So all you have to do is replace the text-aligned field and you should be good.

Answer 2

Margin: auto only works if you specify an element width

I create this jsfiddle for you;) to show you the result:

 .ul_center{ margin: 0 auto; width: 200px; }